Preview Modes

Test your application across different screen sizes to ensure it looks great on every device. Switch between desktop, tablet, and mobile views instantly.

Device Modes

Desktop View

The default view shows your application at full desktop width (1280px+). Use this to design for laptop and desktop screens.

Tablet View

Tablet view displays your application at a medium width (768px). This simulates how your app appears on iPad and similar devices.

Mobile View

Mobile view shows your application at phone width (375px). Essential for ensuring a great mobile experience.

Switching Modes

Switch between modes using:

  • Device buttons - Click the icons in the preview toolbar
  • Keyboard shortcuts - Press 1, 2, or 3

Test All Sizes

Always check your application on all three device sizes before deploying. Many users will access your app on mobile devices.

Responsive Design

The AI automatically generates responsive code that adapts to different screen sizes. If something doesn't look right on a specific device:

  • Switch to that device mode
  • Describe the issue in the chat
  • The AI will make responsive adjustments

Live Preview

The preview is a fully functional version of your application:

  • Click buttons and links
  • Fill out forms
  • See animations and transitions
  • Test scrolling behavior

Refreshing the Preview

If the preview seems stuck or out of sync, click the refresh button or press Rto reload it.

Next Steps

PreviousVisual BuilderNextCode Viewer