Tostada
Try Tostada Join Slack

First launch

You ran npm run dev and npm run dev:preview-host (see install). Both terminals are happy. Now what?

What you'll see at http://localhost:5174

The main app loads directly into the Library at Properties → Tokens → Primitives. There's no onboarding wizard — you start with a working library.

  • Top nav — Library · Spread · Settings · dark-mode toggle · logo
  • Left rail — Properties (Tokens · Layout · Rules) · Components · Documentation
  • Main pane — seeded primitive tokens organized by group (color, radius, spacing, …)

The dark-mode toggle in the top nav swaps every preview without reloading.

The seeded library

You start with about 20 primitive tokens, ~15 semantic aliases, and component bindings for every default CSS variable. The values come from src/tokens/defaults.ts.

Treat this as a placeholder you replace, not a system you build on. Pick a brand color first, then iterate outward.

The preview-host

The component previews you'll see throughout Tostada come from a second Vite app at http://localhost:5179. It's a sibling — its own bundle, its own package.json, its own Tailwind config — so it can render component cleanly without polluting the main app.

You don't open the preview-host directly day-to-day. It iframes into Components detail pages and the block picker. A diagnostic badge in the bottom-right of any preview confirms it's connected:

  • ● tokens (green) — the parent broadcast arrived; rendering with your library
  • ○ placeholder (amber) — no tokens received yet; rendering with stock component defaults

If you see amber, the postMessage handshake didn't complete — usually a reload of the iframe fixes it.

Confirm it works

A 30-second smoke test:

  1. Components → Button — the button page renders previews of every variant.
  2. Hop to Properties → Tokens → Primitives, change a color value.
  3. Hop back to Components → Button — every variant has restyled.
  4. Documentation — tokens.css reflects the new value in :root.

If any of those fail, see troubleshooting.

Where your data lives

Everything is in localStorage. Two keys:

  • tostada-library — your full library (tokens, principles, rules, history)
  • tostada-ai-key — your Anthropic API key (only if you've set one)

Open devtools → Application → Local Storage to inspect. Editing those values directly is technically possible but not supported — the import path is importLibrary (see re-importing).

Resetting to a clean state

localStorage.removeItem('tostada-library')
location.reload()

The seeded library returns. Useful for testing changes from a known starting point.

Next