json-render

JSON specs rendered as React component trees with shadcn/ui

Card + Content

Static spec with Card, Stack, Heading, and Text components.

Welcome
A json-render demo

Hello, json-render

This UI is rendered entirely from a JSON spec using shadcn/ui components.

Dashboard Layout

Grid layout with metrics, badges, progress bars, and a data table.

Dashboard

Users

1,234

+12%
Revenue

$48.2k

+8%
Uptime
Recent Activity
EventUserDateStatus
Deploymentkalyn2026-03-01Success
Buildci-bot2026-03-01Running
PR Mergedkalyn2026-02-28Complete
Test Suiteci-bot2026-02-28Passed

Interactive Form

Two-way state bindings with $bindState, $template expressions, and visibility conditions.

Contact Form
Two-way state bindings

Tabbed Navigation

Tabs with visibility-controlled content panels and an accordion FAQ.

Overview

This tab panel is conditionally rendered based on the activeTab state value. Click the tabs above to switch between panels.