Docs / Start here

Getting started

Open the demo, point the canvas at your app, add devices, turn on Sync, and know when Free ends and Pro begins.

Tessera is an infinite canvas of device frames pointed at the same URL. Scroll syncs across tiles (when Proxy or Live is on), you can arrange a mosaic, then share or capture when you're ready. This guide gets you from first open to that sync moment.

Try the demo

Don't want to wire your own site yet? Open the canvas. A fresh canvas starts with a ready mosaic pointed at a sample site, with Sync already on. Scroll one phone frame and the others track. Paste your own URL whenever you're ready.

Open your app

  1. Go to /app. You can explore on Free without an account; sign in when you want saved mosaics or share links.
  2. Paste a URL in the top bar (e.g. your staging site or https://example.com). Press Enter or Apply. Every tile loads that address.
  3. For localhost with real device width, use Pro and tessera dev (CLI tunnel). Free is for public URLs.

Add devices

Click Device in the bottom action bar and pick a phone, tablet, or desktop size. Free allows up to two tiles on the canvas, enough for the Sync aha. Pro removes the tile ceiling. Details: Devices and layouts.

Turn on Sync

  1. Open Settings. Enable Proxy (or switch tiles to Live, see Settings, Sync, and Live).
  2. Turn on Sync scroll. Scroll one tile; peers follow when they share the same section and sync group.
  3. Optionally enable Follow so clicking a link in one frame navigates the others.
  4. Press 1 for Fit, or 2 to Arrange. See Canvas basics.

Next steps many people take: share a link, save a Mosaic, or (on Pro) capture / Pin.

What's free

Free
Two canvas tiles, Sync / Follow / Arrange, one saved Mosaic, share links that expire in seven days. See Free vs Pro.
Pro
Unlimited tiles, captures, Pin & Compare, profiles, more Live slots, permanent shares. Pricing: /pricing.

Related