JSON Render Desk

Demo

Guardrailed generative UI via @json-render

→
→
Mock generator

1 · Prompt

Describe a small UI. No API key required.

Presets load real json-render Specs — they skip the mock model.

Catalog (31 types)

AccordionAlertAvatarBadgeButtonButtonGroupCardCheckboxCollapsibleDropdownMenuGridHeadingInputLinkPaginationProgressRadioSelectSeparatorSkeletonSliderSpinnerStackSwitchTableTabsTextTextareaToggleToggleGroupTooltip

2 · Spec JSON

Edit the flat tree. Live render updates from this document.

No spec yet

Generate from a prompt or load a preset. The spec is a root key plus an elements map.

3 · Live render

Renderer + @json-render/shadcn registry

No spec to render

Generate from a prompt, load a preset, or paste a json-render Spec with root and elements.

Real: catalog, registry, Renderer, presets, live JSON edits. Mock: prompt → spec uses a local keyword generator unless OPENAI_API_KEY / ANTHROPIC_API_KEY is set.