json-render/examples/no-ai

No-AI Example

Static JSON specs rendered with json-render -- no AI required. This example demonstrates that json-render works as a standalone UI renderer without any LLM, streaming, or backend. Hand-authored specs are rendered client-side with JSONUIProvider and Renderer.

What it shows

• json-render without AI -- specs are plain JSON objects defined in code; no API routes, no streaming, no environment variables.
• Interactive forms -- $bindState for two-way input binding, $cond for conditional visibility, checks for field validation, and a validateForm action.
• Computed functions -- $computed with custom functions like formatAddress and citiesForCountry for derived values.
• Watch and cascading state -- watch triggers setState actions when a value changes, enabling cascading select patterns.
• Templates -- $template for string interpolation with state values.
• Custom actions -- a confetti action wired to react-confetti-explosion.

Demos

The app includes several tabbed demos:

• Confetti -- custom action integration
• Layouts -- cards, stacks, grids, typography, badges, progress bars, pricing tables, status dashboards
• Forms -- state binding, inputs, selects, switches, validation
• Registration form -- $template, $cond, cross-field checks, validateForm, conditional visibility
• Cascading selects -- watch + setState, $computed, $template

Setup

pnpm install          # from the monorepo root
cd examples/no-ai

No environment variables are needed.

Run

pnpm dev
# http://no-ai-demo.json-render.localhost:1355

Requires global portless. The predev script checks for it automatically.

Files

• app/page.tsx -- tabbed gallery rendering each demo spec with JSONUIProvider and Renderer
• lib/examples.ts -- all demo specs as static Spec objects
• lib/render/catalog.ts -- component catalog using shadcn component definitions, with a confetti action and custom functions
• lib/render/registry.tsx -- registry mapping shadcn components, the confetti action handler, and computed function implementations