Test responsive websites across screens.

Start a multi-device preview

Enter an HTTP or HTTPS website URL in the navbar, then choose Load. A hostname without a scheme uses HTTPS; localhost defaults to HTTP. The same URL can be applied to every device or only the selected devices.

• Open Add device and select one or more mobile, tablet, or desktop presets.
• Choose a device header to select it. Use Shift, Ctrl, or Command with a click to select more than one.
• Use Device properties to set an individual URL, logical width and height, frame, name, and visual scale.

Keep viewport size, visual scale, and zoom separate

The CSS viewport determines the responsive layout inside the iframe. Visual scale changes the size of a single preview on the canvas. Canvas zoom changes your view of the entire workspace. Scaling the canvas does not change the page’s responsive breakpoints.

• Resize in viewport mode to change CSS dimensions. Switch to visual-scale mode in the device menu to change only the preview’s display size.
• Rotate a device to swap its viewport width and height. Preset dimensions are editable starting points, not hardware measurements.
• Create a custom preset for a kiosk, unusual display, or a project-specific breakpoint. DPR and user-agent labels are descriptive metadata.

Arrange a workspace that matches your test

Drag device headers to position windows without interfering with the webpages. Manual movement keeps the layout manual. Fit all brings visible devices into view; Space plus drag or the middle mouse button pans the canvas.

• Horizontal and Vertical create simple comparison rows or columns. Grid and Masonry organize larger sets.
• Auto Fit evaluates arrangements and fits the canvas. Focus places a selected device in the primary position.
• Use spacing, padding, alignment, sorting, snap-to-grid, and guides in Settings. Locked devices keep their position.

Save, restore, and share layouts

Device Studio saves the active workspace in localStorage and stores workspace and template records in IndexedDB. Positions, dimensions, visual scales, URLs, frame settings, visibility, and canvas pan/zoom are restored when session restore is enabled.

• Save a useful layout as a personal template, or start with one of six built-in templates.
• Export a workspace JSON or full backup before moving computers, clearing browser data, or changing domains and ports.
• Import supports Replace workspace or Merge devices. Review the summary before confirming. Backups are validated as data and never executed.
• Tabs on the same origin synchronize clean sessions. If two tabs have unsaved changes, a notice lets you choose which version to keep.

Use Browser mode for sites that block iframes

Select a device and choose Browser · Playwright in the sidebar. The configured service opens the website as a top-level Chromium page and streams its pixels. It needs a running Browser service; static-only hosting supports iframe mode.

• Click the preview to type, paste, or use keyboard controls. Scroll with the mouse wheel; Escape returns focus to the workspace.
• Viewport resize and rotation retain the current page and form state. Back/forward are in the device menu.
• Each device has a separate temporary session. Page traffic and credentials entered into websites run on the service host. Reloading or disconnecting ends that session; sign in separately if needed.
• The service supports six concurrent Browser previews by default. Native dialogs, file transfers and multi-window sign-in require opening the original website.

Understand browser preview boundaries

A website can refuse iframe embedding with Content Security Policy or X-Frame-Options. A frame load event cannot prove that a cross-origin page rendered successfully. Choose Browser mode when the service is available, or use Open original URL.

• Cross-origin scrolling synchronization and direct DOM inspection are unavailable in iframe mode.
• A CSS viewport does not emulate a real phone, operating system, mobile Safari, device pixel ratio, or user agent.
• Each page uses browser resources. Practical performance depends on the sites, machine and service limits.

Capture only the surface you choose

Screenshot and recording use the browser’s screen-sharing prompt. Choose a tab, window, or screen. Screenshots download as PNG and recordings download as WebM without audio. Exact device-only capture of arbitrary cross-origin iframe pixels is unavailable.

• You can deny or cancel the permission prompt. No capture starts automatically.
• Stop recording to download the result and release the shared media tracks.
• Recordings automatically stop and download at 256 MB to bound memory use. Browser API and format support vary.

Useful keyboard shortcuts

Frequently asked questions