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

showcase18

Code Editor With Live Logs

Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.

PRO

showcase17

Code Editor With Test Results

Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.

PRO

showcase20

Code Editor With Environments Panel

Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.

PRO

showcase15

Code Editor With Live Activity Feed

Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required.

PRO

showcase28

Markdown Editor With Live Preview

Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required.

PRO

showcase24

Files Changed With Code Editor

Browser-chrome card pairing a changed-files list on the left with a syntax-highlighted code editor on the right — status icons, +/- stats, and an active row highlight. Every label is editable; no media props required.