Interactive workbench
Change component props, themes, viewports, and accessibility states in the full Storybook sandbox.
Every component page embeds a focused Preview / Code example. Use Open interactive workbench ↗ when you want the complete sandbox rather than the compact documentation frame.
What you can change
The workbench opens the exact story shown in the documentation and exposes:
- Controls — edit documented args such as variant, size, disabled, labels, dates, values, and other supported props;
- Theme — switch the Uniwind canvas between light and dark;
- Viewport — exercise responsive widths and device presets;
- Actions — inspect callback events emitted by a component;
- Interactions — run and inspect story play functions where present;
- Accessibility — rerun axe checks and highlight violations;
- Zoom, outline, measure, and vision filters — inspect geometry and visual behavior without changing product code.
Changes are local to the browser session. They do not edit source files or publish a component.
Why some controls are unavailable
A prop is editable only when its story declares a safe Storybook control.
React nodes such as leftView, rightView, and children are usually composed
in the story and intentionally show — instead of an unsafe object editor.
Use the Code tab to copy that composition, or select another story from the
workbench sidebar.
For example, Button / Playground exposes variant, size, and disabled.
Toolbar / Playground composes its icon slots in code and exposes only scalar
props such as iosHint.
Documentation frame versus workbench
| Compact component page | Interactive workbench |
|---|---|
| Natural-height live preview | Full Storybook canvas |
| Generated usage code | Props/args controls |
| Import and API table | Theme and viewport toolbar |
| Focused examples | Entire story catalogue |
| Fast reading and copying | Actions, interactions, and accessibility panels |
Both use the same built Storybook files and the same React Native Web + Uniwind
runtime. Opening the workbench must never lead to the bare iframe.html route;
that route contains only the canvas and has no controls.
Native limitation
The hosted workbench is React Native Web. It validates web behavior and the shared component contract. iOS and Android variants still require the native evidence described in the platform matrix. A future Expo on-device Storybook should reuse this same CSF catalogue rather than create a second sandbox.