Windows are real-time previews of your app rendered on the canvas. Each window shows a live, interactive view of your project that updates instantly as you make changes.
Key features:
Unlimited windows - Create as many preview windows as needed
Multiple device sizes - Preview mobile, tablet, and desktop simultaneously
Multiple branches - Compare different design directions side-by-side
Theme preview - View light mode, dark mode, or system default
Flexible arrangement - Drag, resize, and snap windows anywhere
Independent controls - Each window has its own device type and theme
Window controls appear when you select a window on the canvas.
How to access:
Click on any window on the canvas
Window toolbar appears at the top of the screen
All window controls are available
Window toolbar options:
From left to right, the toolbar includes:
Device Type/Size - Choose preset device dimensions
Rotate Device - Switch between portrait and landscape
Clone Window - Duplicate the current window
Delete Window - Remove the window
System Theme - Light mode, dark mode, or system default
Preview your app on different devices with preset dimensions.
How it works:
Select a window
Click the Device Type/Size dropdown in the toolbar
Choose from available presets:
Mobile devices:
iPhone 14 Pro
iPhone SE
Samsung Galaxy S22
Google Pixel 7
and many others
Tablet devices:
iPad Pro 12.9"
iPad Air
iPad Mini
and many others
Desktop devices:
MacBook Pro 14"
MacBook Pro 16"
iMac 24"
Generic desktop (1440px width)
Full HD (1920px width)
4K (3840px width)
and more..
Custom dimensions:
Select "Custom" to enter exact width and height values for specific testing needs.
Responsive design testing:
Create multiple windows with different device sizes to see how your layout adapts:
Mobile window (iPhone 14)
Tablet window (iPad Air)
Desktop window (MacBook Pro 14")
Device-specific optimization:
Test on actual device dimensions to ensure:
Content fits properly
Text is readable
Touch targets are appropriately sized
Images scale correctly
Switch between portrait and landscape orientations.
How it works:
Select a window
Click the Rotate Device button in the toolbar
Window rotates 90 degrees instantly
When to use rotation:
Test landscape mode (common for tablets)
Verify navigation adapts to orientation
Check media queries for orientation changes
Design for both portrait and landscape experiences
Example workflow:
Select mobile window (iPhone in portrait)
Click Rotate
See how your design looks in landscape
Adjust styles if needed
Click Rotate again to return to portrait
Duplicate a window to compare views or test variations.
How it works:
Select a window you want to duplicate
Click the Clone button in the toolbar
New window appears as an exact copy
Drag the new window to position it
Remove windows you no longer need.
How it works:
1. Select the window you want to remove
2. Click the Delete button in the toolbar
3. Window is immediately removed from canvas
When to delete:
Finished testing specific device size
Too many windows cluttering canvas
No longer comparing branches
Cleaning up workspace
Preview your app in light mode, dark mode, or system default.
How it works:
Select a window
Click the System Theme control in the toolbar
Choose theme:
- Light - Light mode
- Dark - Dark mode
- System - Uses system default setting
Theme behavior:
Each window can have its own theme setting independently:
Window 1: Light mode
Window 2: Dark mode
Window 3: System default
When to use different themes:
Design for both modes:
Create two windows side-by-side, one light and one dark, to design both simultaneously.
Verify theme consistency:
Switch between themes to ensure:
Colors have sufficient contrast
Text is readable in both modes
Images work in both contexts
Brand colors adapt properly
Test system default:
Use "System" setting to see how your app responds to the user's OS theme preference.
Arrange windows on the canvas for optimal workflow.
How to move windows:
Click and drag from the window's title bar or border
Drag to desired position on canvas
Release to place
Automatic snapping:
Windows automatically snap into position when dragged near other windows (align edges)
Snapping benefits:
Keeps windows aligned
Creates clean layouts
Easy to compare side-by-side
Prevents overlapping (unless intended)
How to resize:
Hover over window edge or corner
Cursor changes to resize indicator
Click and drag to resize
Release when desired size is reached
Resize handles:
Corners - Resize width and height simultaneously
Right edges - Resize width only
Bottom edges - Resize height only
Open any window in its own browser tab for full-screen testing and interaction.
How it works:
Select a window on the canvas
The Preview in New Tab button appears in the window toolbar
Click the button
Window preview opens in a new browser tab
What opens:
Full interactive preview of your app
Same device dimensions as your browser window
Same theme setting (light/dark) as your browser window
Same preview as you have in the canvas
Fully functional interactions
When to use:
Test interactions without canvas constraints
Share preview with others (send tab URL)
Test on larger screen without window limitations
Debug in browser DevTools
Test real scrolling behavior
Verify animations and transitions
Preview tab features:
Fully interactive (click, scroll, type, etc.)
Updates live as you make changes in Onlook
Can open multiple preview tabs from different windows
Each tab maintains your browser window's device size and theme
