# Tessera

> Tessera is a browser-based responsive development workspace: an infinite
> canvas where unlimited real device viewports ("tesserae") render a live,
> fully interactive version of any web app simultaneously. Real Playwright-
> backed browser sessions at true device dimensions and pixel densities, not
> screenshots or scaled iframes.

Tessera is for web developers, designers, QA engineers, and **AI coding agents**
who need to verify layouts across many screen sizes.

## Agent API (preferred for LLMs / CI)

Authenticate with a Tessera session token from `tessera login` (Bearer).

### `GET /v1/devices`
List device presets (`responsive`, `mobile`, …) and full device catalog.

### `POST /v1/check`
Multi-viewport layout check. Returns screenshots (optional) + structured issues.

```json
{
  "url": "https://example.com",
  "preset": "responsive",
  "include_screenshots": true,
  "analyze": ["overflow", "viewport"]
}
```

Response includes per-device `metrics` (scroll vs client width), `issues`
(e.g. `horizontal_overflow`), and optional base64 screenshots.

**CLI (for coding agents):**
```bash
tessera login
tessera check https://example.com --preset responsive --json --no-screenshots
tessera check http://localhost:5173 --json   # Pro: tunnels localhost
```

Exit code `2` when any issues are found.

API base: `https://api.tesserae.site`

## What it does

- **Live engine**: each device tile is a real headless-browser session
  streamed to the canvas; you can click, type, and scroll inside every one.
- **Infinite canvas**: arrange phones, tablets, desktops, and custom sizes
  freely; zoom 10–500%; one-click auto-arrange layouts.
- **Synchronised interaction**: scroll and navigation can mirror across all
  devices at once ("follow" mode).
- **DPR-accurate capture**: export pixel-perfect screenshots of every tile
  (device pixel ratio respected) as a ZIP with metadata; reusable capture
  profiles.
- **Mosaics**: save named canvas layouts (device set + URL + positions).
- **Share links**: send a read-only live view of your canvas to anyone.
- **Localhost**: `tessera dev` (Pro) tunnels loopback to the cloud renderer;
  `tessera check` uses the same tunnel for headless agent checks.

## Pricing

- **Free**: 2 tiles on the canvas, 2 concurrent live tesserae, 1 saved
  Mosaic, 7-day share links, agent checks on the `responsive` preset
  (public URLs). No captures. No card required.
- **Pro (£12/month)**: unlimited tiles, 6 concurrent live tesserae,
  captures / Pin & Compare / profiles, unlimited Mosaics, permanent share
  links, full-page & JPEG exports, localhost tunnels + agent checks, all
  device presets.

## End-user docs

Canvas guides (not CLI/API): https://app.tesserae.site/docs

- Getting started: https://app.tesserae.site/docs/getting-started
- Canvas basics: https://app.tesserae.site/docs/canvas-basics
- Devices: https://app.tesserae.site/docs/devices
- Settings, Sync, Live: https://app.tesserae.site/docs/settings-sync-live
- Sections: https://app.tesserae.site/docs/sections
- Toolbar reference: https://app.tesserae.site/docs/toolbar-reference
- Captures, Pin, profiles: https://app.tesserae.site/docs/exports-and-baselines
- Share and Mosaics: https://app.tesserae.site/docs/share-and-mosaics
- Free vs Pro: https://app.tesserae.site/docs/plans
- Shortcuts: https://app.tesserae.site/docs/shortcuts
- Troubleshooting: https://app.tesserae.site/docs/troubleshooting

## Links

- App: https://app.tesserae.site/app
- Homepage: https://app.tesserae.site
- Docs: https://app.tesserae.site/docs
- Pricing: https://app.tesserae.site/pricing
- Compare: https://app.tesserae.site/compare
- Support: https://app.tesserae.site/support
- Privacy: https://app.tesserae.site/privacy
- Terms: https://app.tesserae.site/terms
- Security contact: https://app.tesserae.site/.well-known/security.txt
- API: https://api.tesserae.site
- Try it (no signup, opens with a sample mosaic): https://app.tesserae.site/app

## Common questions

- "How is this different from Chrome DevTools device mode?" DevTools shows
  one viewport at a time in one browser. Tessera shows dozens simultaneously,
  each a real independent browser session, all live and interactive.
- "Is it screenshots?" No. Live tiles are streamed real browser sessions;
  screenshots and `/v1/check` are separate export/analysis features.
- "Does it work with my local dev server?" Yes: `tessera dev` or
  `tessera check http://localhost:…` (Pro) via a reverse tunnel.
- "Can my team see it?" Share links give anyone a read-only live view of
  your exact canvas; team workspaces are on the roadmap.
- "Can an AI agent use this?" Yes: `POST /v1/check` or `tessera check --json`.