Skip to main content
The live preview shows your site as it’s being built. Every change appears instantly, right inside the Kleap editor.

​
How It Works

Kleap builds your site with a real, ephemeral build and renders it live inside the editor. What you see in the preview is exactly what your visitors get once you publish.
  • Updates instantly when the AI edits your code or you make a change
  • Reflects the real build — the same output as production, not a mockup
  • Fully interactive — click, type, and navigate like a live site
Your site is built with Astro 5 (static HTML), Tailwind CSS v4, and React 19 islands for interactivity — so the preview is fast and matches the published result.

​
Preview Panel

The preview panel on the right side of the editor shows:
  • Your rendered site
  • Real-time updates as the AI (or you) edit code
  • Interactive elements (click, type, navigate)

​
Controls

Kleap preview toolbar in English showing Refresh, Open, Edit, Settings, and Publish

Preview controls sit beside the editing and publishing actions

​
Keeping the Preview Fresh

The preview rebuilds automatically whenever your site changes. If it ever looks out of date:
  1. Send a new message — any chat interaction rebuilds and refreshes it
  2. Click Refresh — in the preview panel
  3. Reopen the app — from your apps list

​
Preview vs. Published Site

The preview lives inside the editor and is only visible to you while you work. To get a permanent, public, shareable URL, publish your app. Publishing is a deliberate action. Click Publish when the preview is ready, then use Update whenever you want later changes to go live. An eligible published site lives at:
Publishing does not use AI credits. Publishing availability, hosting, and published-project limits depend on your plan. Sites are served on a global edge network with automatic HTTPS. For custom domains, see custom domains.

​
Testing Your App

​
Interactive Testing

In the preview, you can:
  • Click buttons and links
  • Fill out forms
  • Navigate between pages
  • Test responsive layouts

​
Mobile Testing

Click the device toggle to switch between:
  • Desktop (1280px+)
  • Tablet (768px)
  • Mobile (375px)

​
Console Access

Open browser DevTools to see:
  • Console logs
  • Network requests
  • JavaScript errors

​
Common Issues

  1. Check if you have a stable internet connection
  2. Try refreshing the preview
  3. Send a new message to rebuild the preview
  4. Clear browser cache and reload
  1. Wait a few seconds for the rebuild to finish
  2. Try refreshing the preview
  3. Check for errors in the chat
Large sites or complex operations may take longer. Consider:
  • Breaking changes into smaller steps
  • Optimizing images and assets
  • Removing unused code

​
Preview vs Production

Ready to go live?

Publish your app to production