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
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
| Control | Action |
|---|---|
| Refresh | Reload the preview |
| Open in new tab | View in full browser window |
| Device toggle | Switch between desktop/tablet/mobile |
| URL bar | Navigate to different pages |
Keeping the Preview Fresh
The preview rebuilds automatically whenever your site changes. If it ever looks out of date:- Send a new message — any chat interaction rebuilds and refreshes it
- Click Refresh — in the preview panel
- 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 happens automatically after each generation, and you can also publish on demand with the Publish button. Your published site lives at:Publishing and hosting are free — they don’t use credits. 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
Preview not loading
Preview not loading
- Check if you have a stable internet connection
- Try refreshing the preview
- Send a new message to rebuild the preview
- Clear browser cache and reload
Changes not showing
Changes not showing
- Wait a few seconds for the rebuild to finish
- Try refreshing the preview
- Check for errors in the chat
Slow preview
Slow preview
Large sites or complex operations may take longer. Consider:
- Breaking changes into smaller steps
- Optimizing images and assets
- Removing unused code
Preview vs Production
| Aspect | Preview | Production |
|---|---|---|
| Where | Inside the editor | Public URL (your-app.kleap.io) |
| Visibility | Only you, while editing | Public, 24/7 |
| Purpose | Build and test | Live for visitors |
| Output | Real build | Same build, on a global edge network |
Ready to go live?
Publish your app to production