Image — JsonUI

Install JsonUI in one line
Hello, JsonUI — your first screen in five minutes
Your first screen
Data binding basics
What is JsonUI?

Why spec-first
One Layout JSON per screen
ViewModel-owned state
Data binding as contract
Hot reload everywhere
Responsive design
Screen composition
Screen identity and navigation assertion
Data models from OpenAPI (DTO + Domain)
Implementation contract check
DB schema check (docs/db ⇔ live DB)

The anatomy of a screen spec
Six ways to split a spec
Separating the layout file
Parent + sub specs
Component specs
Custom types
Collection cell classes
Validation + drift detection

Writing your first spec
API data models (cookbook)
Verifying implementation against docs
Referencing the API canon
Branch contracts
Branch tests
Unit contracts
Writing layouts
Navigation between screens
Writing screen tests
Mocking APIs in tests
Adding a new language
Colors and theming
Web framework adapters
Building a custom component
Developer menuiOSAndroid

Attribute reference
Component reference
JSON Schema
MCP tool API
CLI command reference
jui.config.json
Test tooling reference
Generated code

SwiftJsonUI
KotlinJsonUI
ReactJsonUI

jsonui-cli
jsonui-mcp-server
jsonui-doc
jsonui-test-runner
Agents for Claude / Codex
jsonui-helper (VS Code)

Drawn from the specs, checked against the flow tests

Component · Reference

Components›Image

Image

AT A GLANCE

0 required0 optional0 events

ATTRIBUTES

EXAMPLES

RELATED COMPONENTS