Tostada
Try Tostada Join Slack

Install Tostada

Tostada runs locally in your browser, with two Vite dev servers running side by side:

  • the main app (Library, Spread, Settings) on port 5174
  • the preview-host sandbox (components rendered with your tokens) on port 5179

You only ever interact with the main app — the preview-host is what the main app's component previews iframe into.

Prerequisites

  • Node.js ≥ 20.x (Vite 8 requires it)
  • npm or pnpm
  • A modern browser (Chromium 120+, Firefox 120+, Safari 17+)

Path A — Clone the repo (recommended today)

git clone https://github.com/jborozco/tostada.git
cd tostada
npm install
npm install --prefix preview-host

Then run both dev servers in parallel:

npm run dev               # main app on :5174
npm run dev:preview-host  # preview sandbox on :5179

Open http://localhost:5174. You should land on the Library page with seeded tokens.

Path B — npx (coming soon)

The packaged npx tostada-ui distribution is on the roadmap. For now, use Path A.

Path C — Vendored into your monorepo

If you want Tostada to live inside your own monorepo:

  1. Copy tostada/ into your repo (e.g. tools/tostada/)
  2. Add the two dev scripts to your monorepo's task runner
  3. The exported tokens.css / design-system.md / design-system.json can be written directly to your app's source tree

This is the path most teams will take once Tostada hits beta.

First-launch checklist

After both dev servers boot:

  • You see the Library tab with a sidebar containing Properties · Components · Documentation
  • Click Components → pick Button → previews render with the seeded tokens
  • No console errors in either browser tab

If any of those fail, see troubleshooting.

Next