Tostada
Try Tostada Join Slack

URL mode

Route: Spread → URL tab (default)

Iteration note. The Spread pipeline is currently mocked — see REBUILD_PLAN.md → M5.6. The interaction described here is final; the rebuild quality is what changes when the real AI call lands.

How it works

  1. Paste a URL into the input. Anything reachable over HTTP(S) works — no auth-required pages today.
  2. Click Spread (or press Enter).
  3. Tostada fetches the source HTML through its Vite dev-server proxy (/__fetch?url=…), which avoids CORS issues.
  4. The pipeline injects your tokens.css as a high-specificity overlay onto the source HTML and renders both versions into the slider.
  5. Drag the slider to compare original vs spread side by side.

The proxy

Pages can't normally be fetched from another origin without CORS headers. Tostada works around this with a dev-server middleware at /__fetch?url=… that:

  • Accepts only http(s):// schemes
  • Returns the upstream Content-Type
  • Reports the final URL after redirects

This is dev-only — production deployments of Tostada will use a different fetcher.

The slider

Two iframes overlay each other; a vertical handle clips the right iframe to the cursor's X position.

  • Drag the handle left-right with mouse or touch
  • Edge labels show "Original" on the left, "Spread" on the right
  • A loading overlay appears while the spread runs

What works today

  • Static HTML pages restyle fully — text, buttons, surfaces all pick up your tokens
  • The original layout is preserved (positions, sizes, spacing)
  • Most fonts swap if the source uses generic families; specific font names stay

What doesn't work today

  • Auth-required URLs — no login flow
  • SPAs with client-side rendering — Tostada fetches initial HTML only; pages that hydrate from JavaScript won't have content to spread
  • Components that override CSS via inline styles — the overlay can't override style="color: red" without !important everywhere
  • Real semantic re-mapping — today's pipeline is token overlay, not "rebuild this component in your library." That's the deferred AI pipeline.

For a complete list of approximations on a specific spread, see reading the report.

Tips

  • Start with simple pages. A static marketing page reveals the overlay's strengths; a heavy SPA reveals the limits.
  • Pre-render SPAs. If you have access to the source app, run a "Save as HTML" or pre-render step and use HTML file mode instead.
  • Switch dark mode mid-spread. Toggle the top-nav dark mode while the spread side is rendered — it re-resolves through your dark tokens.