Skip to main content

Live Preview

See your application exactly as users will experience it, with changes appearing instantly.

Overview​

The live preview panel shows a fully interactive version of your app:

  • Real rendering - Actual React components, not mockups
  • Instant updates - Changes reflect in milliseconds
  • Full interactivity - Click, type, navigate, scroll
  • Accurate styling - Exact fonts, colors, and spacing

Preview Features​

Responsive Testing​

Test your app on different screen sizes:

DeviceWidth
Mobile375px
Tablet768px
Desktop1280px

Click the device icons in the header to switch views.

Custom Sizing​

Drag the preview panel edges to test any dimension, or enter exact values in the size input.

Orientation​

Toggle between portrait and landscape modes for mobile and tablet views.

Interaction Modes​

Preview Mode (Default)​

Interact with your app normally:

  • Click buttons and links
  • Fill out forms
  • Open modals and dropdowns
  • Navigate between pages

Edit Mode​

Select elements for editing:

  • Click to select
  • Double-click to edit text
  • Drag to move elements
  • Resize using handles

Toggle between modes using the toolbar or press E to switch.

Multi-Page Apps​

Navigate between pages:

  • Click links in the preview
  • Use the page selector in the file panel
  • Back/forward buttons work normally

URL Bar​

The preview shows a simulated URL that updates as you navigate. Click to manually enter a path.

Debugging​

Console​

View JavaScript console output:

  1. Click the console icon in the preview toolbar
  2. See logs, warnings, and errors
  3. Filter by type

Element Inspector​

Inspect elements similar to browser dev tools:

  1. Right-click any element
  2. Select "Inspect"
  3. View computed styles and properties

Network​

See API calls and data fetching:

  • Request/response details
  • Timing information
  • Error status

Performance​

Hot Reloading​

Changes apply without full page reloads:

  • State is preserved when possible
  • Scroll position maintained
  • Form data kept

Optimized Rendering​

The preview is optimized for speed:

  • Incremental updates
  • Cached components
  • Efficient diffing

Zoom and Pan​

Zoom Controls​

  • Scroll wheel (with Cmd/Ctrl)
  • Zoom buttons in toolbar
  • Fit to screen button

Pan​

  • Hold space and drag
  • Two-finger scroll on trackpad
  • Scroll bars for precise positioning

Sharing Preview​

Generate a temporary preview link:

  1. Click Share in the toolbar
  2. Copy the generated URL
  3. Share with team or stakeholders
  4. Link expires after 24 hours

Embed​

Embed the preview in other tools:

<iframe src="your-preview-url" width="100%" height="600" />

Known Limitations​

Browser APIs​

Some browser APIs behave differently in the preview:

  • Geolocation prompts
  • Notifications
  • Camera/microphone access

Third-Party Scripts​

External scripts (analytics, chat widgets) may be sandboxed for security.

Performance​

Very complex apps may render slower in preview than in production due to development mode overhead.

Tips​

Use Real Content​

Replace placeholder text early to see accurate layouts.

Test Interactions​

Don't just look—click, scroll, and interact to find issues.

Check All Breakpoints​

Always verify your design on mobile before deploying.

Use Keyboard​

Test keyboard navigation for accessibility.