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.

Open the canvasHow it works

free forever on the canvas · app.tesserae.site

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

Three moves. The third is the aha.

  1. 01

    Open the canvas

    Land on a ready responsive mosaic (phone, tablet, laptop, desktop) pointed at the live demo. Paste your URL when you’re ready.

  2. 02

    Scroll one tile

    With sync on, every breakpoint moves together. That’s the aha DevTools can’t do: one gesture, every screen.

  3. 03

    Capture, share, or check

    Export DPR-accurate evidence for the PR, send a read-only mosaic link, 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. Any site, real DPR.

  • Accurate

    Exact device dimensions and DPR, not scaled approximations.

  • Synced

    Scroll one tile; every breakpoint moves with it.

  • Evidence

    DPR captures and share links for PRs and reviews.

  • Localhost

    tessera dev tunnels your machine to the cloud lab (Pro).

For humans & agents

Check screen sizes from the canvas, or from CI.

Open the desk and inspect by eye, or run tessera check / POST /v1/check for structured overflow findings across a device preset. Same renderer either way.

Capture & share

Evidence for the PR. A link for the review.

DPR captures

Real renders of every tile at device density, zipped with metadata.

Profiles & Mosaics

Reusable export presets and saved layouts for Development, QA, Marketing.

Share links

Read-only canvas links so design and stakeholders see the same mosaic.

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.

See 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)
  • Agent checks on the responsive preset

Pro

£12/mo

  • Unlimited tiles
  • 6 concurrent live tesserae
  • Captures, Pin & Compare
  • Localhost via tessera dev
  • Agent checks on every preset
  • Unlimited Mosaics & profiles
  • Permanent share links

FAQ

Questions before you open the canvas.

Step-by-step canvas guides live in Docs.

What is Tessera?
Tessera is a live responsive lab: an infinite canvas of real device viewports so you can see your web app on phones, tablets, and desktops at once, at true dimensions and pixel densities, with scroll and navigation in sync.
How is Tessera different from Chrome DevTools device mode?
DevTools shows one simulated viewport at a time. Tessera lays many real-sized devices on one mosaic, keeps interaction in sync across them, and exports DPR-accurate captures, or returns structured overflow findings via tessera check.
Can I preview localhost and staging URLs?
Yes. Paste any public URL into the canvas, keep the built-in /demo, or run tessera dev / tessera check against localhost. Cloud tunnels to your machine require Tessera Pro.
Is Tessera free?
Yes. Free includes two tiles, sync, arrange, a Mosaic, and share links so you can feel the aha. Captures, Pin/Compare, capture profiles, and more than two tiles are Pro (£12/mo).
Can AI agents use Tessera?
Yes. Run tessera check --json or POST /v1/check with a session token to sweep a URL across device presets and get structured layout issues (for example horizontal overflow) plus optional screenshots.
How do I cancel Pro?
Use the in-app Stripe customer portal when available, or email support@tesserae.site from your account address. Pro continues until the end of the paid period, then you return to Free limits. See Support and Terms for details.
What data does Tessera process?
Account identity via Clerk, billing via Stripe, URLs you load for Live/captures/checks, and share snapshots you create. We use essential auth cookies only, no ad trackers. Full detail is in the Privacy Policy.

Lay your first tessera.

Open the canvas on a ready mosaic. Scroll one tile. Watch every screen move.

Open the canvas

or tessera check / tessera dev