Skip to main content

​
What is Live Preview?

The Live Preview shows your application running in real-time. Every change you make in the code editor or via AI agents appears instantly in the preview window.

Hot Module Replacement

Changes apply without full page reload

Real-Time Updates

See changes as you type or as AI generates

Interactive

Click, navigate, and interact like a real site

Responsive

Test different screen sizes and devices

​
Preview Layout

The preview window appears on the right side of your workspace: 
┌─────────────────┬─────────────────┐
│                 │   Preview URL   │
│   Code Editor   │   Browser Bar   │
│                 ├─────────────────┤
│                 │                 │
│                 │                 │
│                 │  Your App Here  │
│                 │                 │
│                 │                 │
│   Chat Panel    │                 │
└─────────────────┴─────────────────┘

​
Preview Modes

  • Normal Mode
  • Browser Tabs
Single browser view
  • One preview window
  • Full app interaction
  • Fast and simple
  • Default mode
Best for: Most development tasks

​
Browser Controls

The preview includes browser-like controls:
  • Navigate through page history
  • Click back arrow to go back
  • Click forward arrow to go forward
  • Works like a real browser
  • Reload the preview
  • Click refresh icon
  • Useful for clearing state
  • Force full reload if needed
  • Open preview in actual browser tab
  • Test in different browsers
  • Share with others
  • Debug with DevTools
  • View current route
  • Copy preview URL
  • Share with team
  • Test specific pages

​
Hot Module Replacement (HMR)

​
How HMR Works

When you make changes:
1

Code Changes

You edit code or AI generates changes
2

Vite Detects

Vite development server detects file change
3

Module Updates

Only changed modules are replaced
4

State Preserved

Component state remains intact
5

Preview Updates

Changes appear instantly in preview
HMR is much faster than full page reloads and preserves your app state.

​
What Triggers HMR

  • Component changes: Edit React components
  • Style updates: Modify CSS files
  • Asset changes: Update images or fonts
  • Config changes: Some config updates (may need full reload)

​
Responsive Design

Test your app on different screen sizes:
  • Desktop
  • Tablet
  • Mobile
  • Full width preview
  • Desktop layout
  • Mouse interactions
  • Keyboard shortcuts

​
Resize Controls

Drag Edge

Drag preview edge to resize manually

Device Presets

Coming soon: Quick device size presets

Responsive Mode

Coming soon: Side-by-side multi-device view

Rotation

Coming soon: Rotate device orientation

​
Interacting with Preview

The preview is fully interactive:

​
Mouse & Click

  • Click buttons and links
  • Hover over elements
  • Scroll through content
  • Right-click for context menus

​
Forms & Input

  • Type in input fields
  • Submit forms
  • Upload files
  • Test validation
  • Click links to navigate
  • Use back/forward buttons
  • Test routing
  • Deep link to pages

​
DevTools

  • Open preview in new tab
  • Use browser DevTools
  • Inspect elements
  • Debug JavaScript
  • Monitor network

​
Preview URL

Each project has a unique preview URL: 
{project-slug}.studio.localhost

​
URL Features

  • Copy and share URL
  • Team members can access
  • Works on local network
  • Requires authentication
  • Only accessible when logged in
  • Project-specific URL
  • Isolated from other projects
  • HTTPS in production
  • Full routing support
  • Deep linking works
  • Query parameters
  • Hash navigation

​
Development Server

​
Server Status

Monitor your dev server:

Healthy

Green indicator - server running

Starting

Yellow indicator - server booting

Error

Red indicator - server crashed

Reconnecting

Attempting to reconnect

​
Server Controls

In Project Settings:
  • Restart Server: Force restart if stuck
  • View Logs: Check server output
  • Port Info: See assigned port
  • Health Status: Monitor uptime

​
Troubleshooting

Problem: Blank or loading previewSolutions:
  • Wait 30-60 seconds for initial startup
  • Check server status indicator
  • Restart development server in settings
  • Check browser console for errors
  • Refresh the preview
Problem: Code changes don’t show in previewSolutions:
  • Check if HMR is working (console message)
  • Try manual refresh
  • Ensure files are saved
  • Restart dev server if needed
  • Check for syntax errors preventing build
Problem: Red error overlay in previewSolutions:
  • Read error message carefully
  • Check recent code changes
  • Look for syntax errors
  • Fix TypeScript errors
  • Ask AI agent to debug
Problem: Preview is laggy or slowSolutions:
  • Close other browser tabs
  • Disable browser extensions
  • Check CPU usage
  • Optimize large images
  • Reduce component complexity

​
Best Practices

Test Often

  • Check preview after each change
  • Test interactions work
  • Verify responsive design
  • Try different scenarios

Use Real Browser

  • Open in new tab periodically
  • Test with DevTools
  • Check different browsers
  • Verify production behavior

Monitor Console

  • Watch for errors
  • Check warnings
  • Verify API calls
  • Debug issues

Refresh When Needed

  • After major changes
  • If state gets weird
  • To clear caches
  • When HMR fails

​
Advanced Features

​
Coming Soon

Device Presets

Quick iPhone, iPad, Android sizes

Multi-Device

See multiple sizes at once

Network Throttling

Simulate slow connections

Screenshots

Capture preview screenshots

Recording

Record interactions

Share Live

Share preview publicly

​
Next Steps

Code Editor

Make manual code changes

Using AI Agents

Let AI build features

GitHub Integration

Commit your changes

Chat Interface

Chat with AI agents