How It Works
Your app runs in a cloud sandbox (powered by Daytona) that:- Hot reloads when code changes
- Persists state during your session
- Runs real Next.js - same as production
Preview Panel
The preview panel on the right side of the editor shows:- Your running application
- Real-time updates as you 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 |
Auto-Stop Behavior
Restarting the Preview
When stopped, restart by:- Send a new message - Any chat interaction restarts it
- Click Refresh - In the preview panel
- Navigate to the app - From the apps list
Session State
When the preview restarts:- Code changes are preserved
- Database data persists (Supabase)
- Local state/session resets
Preview URL
Your preview runs at a temporary URL:This URL is temporary and requires authentication. For permanent, shareable URLs, publish to Vercel.
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
Performance
The preview runs on cloud infrastructure with:- Fast startup (under 2 seconds)
- Hot module replacement
- Automatic dependency installation
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 restart the sandbox
- Clear browser cache and reload
Preview stopped unexpectedly
Preview stopped unexpectedly
The preview auto-stops after 15 minutes. Send any message to restart it.
Changes not showing
Changes not showing
- Wait a few seconds for hot reload
- Try refreshing the preview
- Check for errors in the chat
Slow preview
Slow preview
Large apps 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 |
|---|---|---|
| URL | Temporary | Permanent |
| Access | Authenticated | Public |
| Uptime | During editing | 24/7 |
| Speed | Development mode | Optimized |
| Features | Full | Full |
Ready to go live?
Publish your app to production