Tessera

See your app on every screen, live.

An infinite desk of real device viewports. Scroll one, watch every breakpoint move. Capture evidence. Share the mosaic. Not screenshots.

Try the sampleStart with Pro — £12/mo

two tiles free · Pro is £12/mo · app.tesserae.site

At a glance

What, who, how, and price.

Tessera is a viewport lab, not an AI tool. These four answers match the FAQ word for word.

What is Tessera?
Tessera is a multi-device viewport lab: see a live web app across phone, tablet, and desktop viewports in one screen, at true CSS viewport size — the widths media queries actually see. Device DPR is labelled on tiles and applied for Pro captures. The default iframe preview uses the host browser’s pixel density.
Who is Tessera for?
Indie makers, frontend developers, and designers who ship web apps and need to check layouts across devices without resizing one browser window at a time.
How does it work?
Paste a public or staging URL, or keep the built-in sample. Tessera opens live viewports side by side. Proxy is on by default so most sites embed and scroll can stay in sync.
Is Tessera free?
Yes. Free includes two tiles, two concurrent live sessions, sync, arrange, one Mosaic, 7-day share links, and tessera check on the responsive preset. Pro is £12 per month for unlimited tiles, six live sessions, captures, Pin & Compare, localhost tunnels, all agent presets, unlimited Mosaics, and permanent shares.

The problem

Responsive checks still mean resize, check, miss, repeat.

DevTools shows one preset at a time. You forget a breakpoint, miss a horizontal overflow, and ship the bug. Tessera replaces that loop with one mosaic: every screen you care about, live, in sync.

See it in action

Fifteen seconds, every screen.

Sound on for the full effect. Everything in the film is the real canvas.

How it works

Four moves. Scroll is the aha.

  1. 01

    Try the sample

    Open https://app.tesserae.site/sample — a phone and desktop tile load the built-in /demo mosaic with Sync on.

  2. 02

    Feel Sync, or paste your URL

    Scroll one tile and watch the others follow. Or paste your public or staging URL in the top bar and press Go. Proxy is on by default.

  3. 03

    Arrange or add a device

    Fit the mosaic, rearrange tiles, or add another device. Free is two tiles; a third is Pro at £12/mo.

  4. 04

    Share or check

    Mint a read-only share link from the canvas, or run tessera check for structured overflow findings.

Live workspace

Real viewports. Real interaction. Same page, every tile.

Click, scroll, and type inside each tessera. Sync scroll and Follow keep the mosaic aligned. The Live engine streams real Playwright sessions when you need true isolation.

  • Accurate

    Exact CSS viewport W×H — media queries see the real size. DPR is labelled and used for Pro captures; the iframe preview uses the host browser’s pixel density. Canvas zoom changes on-screen appearance, not the CSS viewport.

  • Synced

    Scroll one tile; every breakpoint moves with it.

  • Evidence

    DPR captures and Pin & Compare are Pro — £12/mo. Share links work on Free (7 days).

  • Localhost

    tessera dev tunnels your machine to the cloud lab (Pro — £12/mo).

Optional CLI

Check a public URL from the terminal.

tessera check is a real command in this repo. It sweeps a URL across device presets and prints structured overflow findings. Public URLs work on Free; localhost on the cloud canvas needs Pro — £12/mo.

tessera check https://example.com --summary

Install from the repo: cd cli && npm install && npm link

Capture & share

Evidence for the PR. A link for the review.

Captures, Pin & Compare, and permanent shares are Pro — £12/mo. Free still syncs two tiles and mints 7-day links.

Try the sampleStart with Pro — £12/mo

DPR captures

Real renders of every tile at device density, zipped with metadata. Pro — £12/mo.

Profiles & Mosaics

Reusable export presets and saved layouts. Profiles and unlimited Mosaics are Pro — £12/mo.

Share links

Read-only canvas links so design and stakeholders see the same mosaic. Free 7-day; Pro permanent — £12/mo.

Pricing

Free on the canvas. Pro when you go wall-to-wall.

Feel the sync aha on two tiles for free. Pro unlocks the full mosaic, captures, Pin & Compare, localhost tunnels, and more live sessions.

Try the sampleStart with Pro — £12/moSee full pricing

Free

£0

  • 2 tiles on the canvas
  • Live sync, follow & arrange
  • 2 concurrent live tesserae
  • 1 saved Mosaic
  • Share links (7-day expiry)
  • tessera check on public URLs (responsive preset)

Pro

£12/mo

  • Unlimited tiles on the canvas
  • 6 concurrent live tesserae
  • Captures, Pin & Compare
  • Capture profiles & full exports
  • Localhost via tessera dev
  • tessera check on every preset
  • Unlimited Mosaics
  • Permanent share links

FAQ

Questions before you open the canvas.

Step-by-step canvas guides live in Docs.

What is Tessera?
Tessera is a multi-device viewport lab: see a live web app across phone, tablet, and desktop viewports in one screen, at true CSS viewport size — the widths media queries actually see. Device DPR is labelled on tiles and applied for Pro captures. The default iframe preview uses the host browser’s pixel density.
Who is Tessera for?
Indie makers, frontend developers, and designers who ship web apps and need to check layouts across devices without resizing one browser window at a time.
How does it work?
Paste a public or staging URL, or keep the built-in sample. Tessera opens live viewports side by side. Proxy is on by default so most sites embed and scroll can stay in sync.
Is Tessera free?
Yes. Free includes two tiles, two concurrent live sessions, sync, arrange, one Mosaic, 7-day share links, and tessera check on the responsive preset. Pro is £12 per month for unlimited tiles, six live sessions, captures, Pin & Compare, localhost tunnels, all agent presets, unlimited Mosaics, and permanent shares.
How is Tessera different from browser DevTools?
DevTools shows one simulated viewport at a time. Tessera shows multiple real-sized viewports on one canvas and lets you share that lab as a read-only link.
Does Tessera need an install?
No. Tessera is browser-based at app.tesserae.site — there is no desktop app to install. An optional CLI (tessera check, tessera dev) is available if you want layout checks or localhost tunnels.
Is Proxy on by default?
Yes. New workspaces start with Proxy on so external pages can load in tiles and Sync can work. Turn it off in Settings if you want raw iframes.
Can I preview localhost?
Yes. On a local Tessera install, paste localhost into the URL bar. On the cloud canvas, localhost tunnels need Tessera Pro — £12/mo — and tessera dev.
Try the sampleStart with Pro — £12/mo

Lay your first tessera.

Open the canvas on a ready mosaic. Scroll one tile. Watch every screen move. Free is £0; Pro is £12/mo when you need the whole wall.

Try the sampleStart with Pro — £12/mo

or tessera check / tessera dev