Components
Your components, on your tokens, in every mode
Tokens only matter where they land. Stoaken renders your components against your tokens, checks them, and photographs them for every release, so a reviewer sees the change, not just the hex.
The Bench renders every component against your tokens, in any mode, with tokens, accessibility and clicks checked.
Open this page on a computer to try it live.
From a token to a pixel
A wall of live components
Every component rendered with your tokens, side by side, in the mode you pick. A ring on each shows tokens, accessibility and clicks at a glance.
Props bound to tokens
Each prop points at a token. Change the token, and every component that uses it shows the change, here and in review.
31 starters, or your own
Start from buttons, fields, alerts, cards, tabs and more, or paste your own component: Stoaken finds its props and suggests the tokens to bind.
Accessibility on every render
Each render is checked for accessibility issues, with what to fix and where.
Clicks that still work
Describe what a click or a key should do, and every render checks it still does.
Clashes caught early
Text and background bound to colours that are too close? The card warns you, with a shortcut to fix the bindings.
Screenshots for every release
Submitting a release captures each component in every mode and state and compares it with the last one. Anything that moved is flagged for a person.
Before and after, side by side
Drag a slider across a flagged capture to see exactly what changed, in the mode it changed in.
Isolated, always
Your component code runs in a sandboxed frame with its own content policy, never with access to your session or data.
The rest of Stoaken