Preview Overview
How the VULK live preview works — architecture, updates, and what to expect.
Preview Overview
How Preview Works
When VULK generates or edits your app, it runs in a live preview panel inside the editor. The preview is a real Vite development server running on dedicated infrastructure — not a simulation or screenshot.
Architecture
Each project gets its own isolated Vite process with:
- A dedicated directory with your project files
- Pre-installed npm dependencies (symlinked from a shared base template for speed)
- An Express server managing the lifecycle
- WebSocket connection for file updates
The preview infrastructure runs on a separate server with a warm pool of pre-initialized Vite instances, so new previews start in seconds rather than minutes.
How Updates Work
When you edit your app through chat, VULK writes the updated files to your project directory and triggers a full page reload in the preview iframe. This ensures you always see the latest version of your complete app.
The preview uses a full page reload after each edit — not incremental Hot Module Replacement (HMR). This means every update shows the complete, consistent state of your app. Reloads typically take 1-3 seconds depending on project size.
Preview Features
- Live rendering — Your app runs in a real browser environment
- Responsive testing — Toggle between desktop, tablet, and mobile views using the device icons
- Interactive — Click buttons, fill forms, navigate between pages, scroll — everything works
- Open in new tab — Click the external link icon to test your app in a full browser window
- Console output — Errors and logs from your app are captured and shown in the editor
Preview Panel
The preview panel is located in the center of the editor interface. It shows your app running inside an iframe connected to the preview server.
Controls
- Reload — Force a fresh reload of the preview
- Device toggle — Switch between desktop, tablet, and mobile viewports
- New tab — Open the preview URL in a separate browser tab
- URL bar — Shows the current preview URL (useful for sharing or debugging)
What to Expect
- Preview starts automatically when you create or open a project
- First load may take a few seconds while the Vite server initializes
- After generation, the preview refreshes automatically with your new files
- If the preview shows a blank screen, try clicking the reload button
- External API calls from your app work normally (subject to CORS)
Differences from Production
The preview environment is optimized for development speed, not production performance:
| Aspect | Preview | Production (Deploy) |
|---|---|---|
| Server | Vite dev server | Static files on Cloudflare CDN |
| Speed | Development mode | Optimized, minified build |
| URL | Temporary preview URL | Your custom domain or vulk.host subdomain |
| Persistence | Active while you work | Always online |
| HTTPS | Yes | Yes |
Troubleshooting
If your preview is not loading, see Preview Not Loading.