Interacting with the Live Preview

See your app come to life - instantly and interactively. Once Kulp starts building your features, you’ll immediately get access to a live visual preview of your app. This isn’t just a static screen - it’s a fully interactive front-end that evolves as you build.

Last updated 7 months ago

What Is the Live Preview?

The Live Preview is a real-time, clickable version of your app that updates with every new feature you generate. You don’t need to deploy or publish anything to see it - it’s always running in the background.

You’ll see:

  • Pages (e.g., login, dashboard, forms)

  • UI Components (buttons, tables, inputs, etc.)

  • Navigation and layout

  • Real-time updates as you build or revise

Where to Find It

As soon as you build your first module or page, the preview becomes available in your workspace view.

  • The preview panel usually appears side-by-side with your Build Plan.

  • You can resize, interact, and navigate through your app just like a user would.

What You Can Do with It

Test Every Element

Click buttons, open dropdowns, fill out forms - test your app like a real user.

Give Feedback to Improve

Don’t like how something looks or works?

Use a prompt like:

“Change the button color to blue and make it full width.”

Watch Changes Happen Live

When you update a feature or regenerate something, you’ll immediately see those changes reflected in the preview.

Can You Customize from the Preview?

Not directly (yet), but it’s tightly integrated with Kulp’s prompting system. You can:

  • Hover over elements to see what they are

  • Use precise prompts like:

    “Update the table in the Orders page to include a status filter.”

  • Ask for fixes if something feels broken or off

What Happens After You Preview?

Once you’re satisfied with how something looks and behaves, you can:

  • Move on to build the next feature

  • Go back to tweak it via prompt

  • Prepare for final publishing

Best Practices

  • Check functionality as you go. Don’t wait until the end.

  • Prompt for UI refinements when something feels off - even small tweaks matter.

  • Use the preview for alignment with your mental model of the product.

  • Test user flows: e.g., signup → dashboard → logout.