Documentation · Viewport

Getting started

Viewport is a Chrome extension. Install it, open any site, and click the Viewport icon in the toolbar. A device frame appears over the page you are already on, showing the same site at a phone viewport width.

No account, no sign-up and no licence key. The free plan works the moment it is installed.
Permission to read the site is asked the first time you open a preview on it, not at install time. Declining means the preview cannot load, and nothing else.
Everything renders in your browser. Nothing about the page you are viewing is sent anywhere.

The toolbar

The floating bar is the whole interface. Left to right, it holds the device picker, rotation, zoom, the device count, then the feature menus, then capture and view controls.

Device and rotate: Pick from 38 devices, or one you defined yourself. Rotate swaps the width and height of the active device.
Zoom: Scales the frame on your screen. It does not change the viewport the site sees, so a page at 50% zoom still reports the same CSS pixel width to your media queries.
Device count: Add or remove panes. Every pane is an independent device, and they scroll together while sync is on.
Scenes: Save the current board, its devices, zoom and layout, and bring it back later by name.
Compare: Points a pane at a different URL so a staging build and production sit side by side at the same width.
Network: Throttles the preview to a slower connection profile.
Region: Overrides geolocation, locale and timezone. Chrome shows its own banner while this is on, because it uses the debugger protocol.
Capture: Screenshot, full page, every device at once, or capture and annotate.
Visual regression: Save a baseline, compare against it, or clear the stored ones. The design overlay lives here too.
Page state: Save and re-apply the localStorage and sessionStorage of the page in the preview.
Web Vitals: LCP, CLS and INP for the active pane. A dash means the metric has not been measured yet, never a zero.

Keyboard shortcuts

Shortcuts are keyed on the physical key rather than the character, so they work on non-QWERTY layouts. They yield to the page while you are typing in a text field.

Ctrl + K / Cmd + K: Open the command palette.
R: Rotate the active device.
Shift + 1: Screenshot the active device.
Shift + 3: Start or stop recording.
Shift + 4: Focus mode: hide everything except the frames.
Shift + 5: Cycle the audit overlay.
Shift + =: Add a device to the board.
Shift + -: Remove the active device.
Escape: Leave focus mode. If you are not in focus mode, close Viewport.

The command palette

Ctrl+K opens a searchable list of every action, which is usually faster than finding the right menu. Type a few letters of what you want, press Enter.

It reaches rotate, add and remove device, screenshot, full page, capture every device, capture and annotate, save baseline, compare against baseline, design overlay, save page state, record, audit overlay, focus mode, sync, theme, save scene, compare and close.

Capturing

Screenshot: The active device, framed, as a PNG. The frame is drawn from geometry, so it stays sharp at any zoom.
Full page: Scrolls the preview and stitches the result. If a page cannot be stitched all the way down, the toast says how many slices were captured rather than quietly handing over a shorter page.
Every device: Runs the board one pane at a time and saves each. One failing pane does not abandon the rest.
Capture and annotate: Opens the shot in an editor with an arrow, box, pen, text and redaction tool, undo and redo, then exports a PNG. Redaction destroys the pixels rather than covering them.
Recording: Records the tab and writes an MP4 on your machine. Encoding happens locally; there is no server to upload to.

Visual regression

Save a baseline of the current pane, change something, then compare. Viewport reports how many pixels moved and downloads a diff image whenever anything did.

Baselines are stored as images in your browser, keyed by device and URL. They are never uploaded.
The comparison uses a per-channel tolerance, so a font rendering a shade differently is not reported as a change.
The design overlay is the manual version of the same idea: drop a mockup over the pane and line the two up by eye.

Page state

Most interesting screens are behind a flag or a session, not on the logged-out marketing page. Page state reads the localStorage and sessionStorage out of the preview, saves it under a name, and pushes it back when you ask.

Applying a state clears, writes and reloads, so what you get is what you saved rather than what you saved merged onto whatever was already there.
Same origin only. A comparison pane pointed at another build cannot be written to, and Viewport says so rather than doing nothing.
Cookies are not seeded. That would need a separate permission Viewport does not ask for.
A saved state can contain whatever the site put in storage, including a session token, and it is stored unencrypted like any other extension setting. Save states from sites you trust.

Auditing a layout

The overlay button cycles through six modes, each drawn over the preview rather than injected into the page.

Off: No overlay.
Layout grid: A column grid to check alignment against.
Touch targets: Marks interactive elements smaller than the recommended minimum.
Contrast: Flags text whose contrast against its background falls below WCAG AA.
Headings, images and labels: Heading order, images without alt text, and form controls with no accessible name.
Focus order: Numbers the tab sequence so you can see where keyboard focus actually goes.

These are a fast first pass, not a certification. They catch the common, mechanical failures; they cannot judge whether alt text is any good.

What Free includes

The free plan has no time limit and is not a trial. It is a working tool that stays free.

Devices: All 38 device frames.
Board size: Up to 3 devices on screen at once. Pro raises this to 10.
Screenshots: Unlimited, framed, at full resolution.
Recording: Up to 2 minutes at 1080p. Pro removes the limit and raises the ceiling to 4K, with trim and speed editing.
Pro only: Scenes, comparison panes, network throttling, region emulation, layout audits, custom device profiles, visual regression, design overlay, full page capture, page state, Web Vitals, batch capture and annotation.

Gates decide what is offered, never what is destroyed. Nothing you made on Pro stops working if a subscription ends, and a board saved with ten devices keeps its devices.

When a site fights back

The preview will not load: Some sites refuse to be framed. Viewport relaxes the framing headers for the preview request only, and where that is not enough it falls back to a real browser window at the device size.
The site serves its desktop layout: Check that the device picker is on a phone. Viewport sets both the User-Agent and the client hints, but a site sniffing something else entirely can still get it wrong.
Chrome shows a debugging banner: Region emulation needs Chrome's own protocol, and Chrome warns whenever it is attached. Turning region off detaches it.
Recording will not start: Tab capture needs the tab to be active and the permission granted for this tab. Click the Viewport icon on the tab you want to record.
Web Vitals look wrong: A framed preview shares a main thread with the host page. Treat the numbers as a signal, not as a lab measurement.

Getting help

Questions, bugs and feature requests all go to the same place, and a person answers.

support@orbitexaio.com