Component Preview With Code Editor

Live preview

Render the component next to its source

Tweak a prop on the right, see the variant repaint on the left. No build step, no Storybook tab, no out-of-sync screenshots.

button.tsxtheme.config.tstokens.css

Button

3 variants
Size
// Define the button surface
import { ui } from "@beste/ui";
// Variants drive the slot props
const Button = ui.primitive("button");
// Default tone for the brand
Button.tone("primary");
Button.size(["sm", "md", "lg"]);
// Wire up keyboard focus rings
Button.focus("ring");
export default Button;
About this block

Component Preview With Code EditorPRO

Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.

More Showcase blocks

View all Showcase
PRO

showcase17

Code Editor With Test Results

PRO

showcase15

Code Editor With Live Activity Feed

PRO

showcase18

Code Editor With Live Logs

Get Pro access