Responsive previews

Preview your app at mobile, tablet, and desktop breakpoints side by side. Catch responsive issues without resizing the browser.

The preview pane in vly’s editor supports multi-breakpoint side-by-side previews. Toggle from the preview toolbar to see your app at mobile, tablet, and desktop widths simultaneously.

How to toggle

1. Preview toolbar → Layout dropdown

   Pick “Single”, “Mobile + Desktop”, or “All three”.

2. Resize each pane independently

   Drag the divider to fine-tune. The preview re-renders at the new width.

3. Lock to a breakpoint

   Click the breakpoint name to lock — useful for screenshot-perfect testing at exactly 375px or 1280px.

Default breakpoints

Name	Width	Tailwind class
Mobile	375px	(default; smaller than sm)
Tablet	768px	md
Desktop	1280px	lg / xl

Customize in your project’s preview settings if your app targets different breakpoints.

Responsive design tips

Design mobile-first

Tailwind’s default breakpoints are mobile-first. Start with no prefix; layer md: and lg: for larger screens.

Use Container queries when scoped

For components that should adapt to their parent (not the viewport), use Tailwind’s @container queries.

Test on real devices

The preview is good but not perfect — different OS browsers (mobile Safari, mobile Chrome) have quirks. Test on a real phone before launch.

Watch font sizes

Mobile body should be 16px+ to avoid iOS auto-zoom on form fields.

Common responsive prompts

Make the dashboard responsive — on mobile, the sidebar collapses into a
hamburger menu; tablet shows the sidebar but narrow; desktop shows the
full sidebar.

On the task list, show 3 columns on desktop, 2 on tablet, 1 on mobile.

Test the signup page on mobile — the form is too wide and the button
runs off the right edge. Fix it.

Related

Tailwind config

Customize breakpoints.

Design systems

The broader system.

Visual edits

Click-to-edit on the canvas.