Point. Tweak. It's already in the code.

Your agent built the prototype. Toss turns it into the design file. Click anything, change it, and the edit lands straight in the real React source your agent wrote. No more describing pixels in prose.

Email only. No account, nothing to install yet.

Click a real element. Edit it. It's already in your file.

Nothing here is a mockup: that's the running app, and the edit lands in DashboardV1.tsx.
1Click anything in your running prototype
Get started
2Edit it in a panel built from your design system
Properties · Button
variant ghost
variant primary
size md
color accent.600
3The prototype's .tsx updates. Hot reload shows it instantly
// Hero.tsx, after the edit
- <Button variant="ghost">
+ <Button variant="primary">
  Get started
 </Button>
// formatted like you wrote it ✦

Canvas, comments, walkthroughs and versions, as one.

same overlay, same source of truth
Canvas
Every screen, one storyboard
Comments
Feedback where it happens
Walkthroughs
Tours that present themselves
Versions
Explorations, kept

When it isn't sure, it doesn't touch it.

Some structures can't be rewritten and put back safely. Toss refuses those rather than guessing: the control greys out, and the file is left byte-identical.

paddingspacing.4 ✓
variantprimary ✓

Your agent drafts. You refine.

Ask your coding agent to draft the page, then tune the spacing, variants, and tokens yourself in Toss. Same files, both directions, nothing to sync.

Cursor
Claude
GitHub Copilot
your agent
Pricing.tsx

Your design system decides what's on offer.

The panel isn't a generic CSS editor. It offers the components, props and token values your system actually allows, read from your own types and never hand-listed by us. When your system changes, the panel changes with it.

1
Components, generated

Point the generator at your package. It reads your types (or your CLI, if you have one) and produces the component list the Insert tab offers. Committed to git, versioned with your system.

2
Tokens, yours

Your token families: spacing, colour, typography, radius, whatever you define. A designer picks spacing.4, not 16px, so an edit lands in your language and a value outside it is never offered.

3
Editing rules, as data

Which panel sections appear, on which elements, and how styles are written: a style object, utility classes, or your own writer. Declared in .toss/config.json, no adapter code required.

4
Distribution, once

Publish it as a package. A product team installs it and gets your catalog, your tokens and your rules as you shipped them, rather than each team wiring it up their own way.

Those pictures are the design system's own components, shot on its own machine. Toss never renders someone else's library.
One entry, for the whole company
A product team adds this, and your catalog, tokens and rules come with it.
{ "plugins": ["@acme/toss-plugin"] }

Not sure it will fit? It runs on your dev server against your real code, so the honest test is ten minutes, not a migration.

Interested?

We’re working with a few teams at a time. Leave an email and we’ll get in touch.