JsonUI
← LearnWhat is JsonUI?A cross-platform UI framework that treats the screen spec as the source of truth. You write one screen_spec.json + one Layout JSON + one ViewModel, and the generator emits native SwiftUI, Jetpack Compose, and Next.js / React side by side. This page is here to tell you — without installing anything — whether that trade is worth your time.~8 min read
One sentenceJsonUI is 'write once, render natively on three platforms, treat the spec as the contract'. The contract lives in screen_spec.json and is what all three platforms agree on. Everything else — visuals, interactions, navigation — is derived from that contract by a deterministic generator, and drift between spec and generated code is caught by a single command (jui verify --fail-on-diff). That loop is the product.
counter.spec.json (simplified sketch — structure only)
// Simplified sketch — the real spec wraps these under `metadata`,
// `stateManagement`, and `dataFlow` (see docs/plans/17-spec-templates).
// The contract (screen_spec.json) + the content (Layout JSON) + the
// behavior (ViewModel) — one set of sources, three platforms out.
{
  "name": "Counter",
  "uiVariables": [{ "name": "count", "type": "Int", "initial": "0" }],
  "eventHandlers": [{ "name": "onIncrement" }]
}
The three piecesA screen has three authored artifacts. (1) screen_spec.json — the contract: what state exists, what events fire, what types flow through. (2) Layout JSON — the visual tree: headers, buttons, sections, bound to @{variables} from the spec. (3) ViewModel — the behavior: the class that owns state and handles events. The generator reads all three and emits the platform-specific code; you never write SwiftUI, Compose, or React directly.
greeting.json
// docs/screens/layouts/greeting.json — the ONE file you write.
{
  "type": "View",
  "orientation": "vertical",
  "gravity": "center",
  "paddings": [24, 24, 24, 24],
  "child": [
    { "data": [
        { "name": "name",  "class": "String", "defaultValue": "world" },
        { "name": "onTap", "class": "() -> Void" }
    ]},
    { "type": "Label",  "text": "Hello, @{name}", "fontSize": 28, "fontWeight": "bold" },
    { "type": "Button", "text": "Say hi",        "onClick": "@{onTap}", "topMargin": 12 }
  ]
}
three native outputs
// iOS (SwiftUI) — emitted by jui build
VStack(alignment: .center, spacing: 0) {
  Text("Hello, \(vm.name)").font(.system(size: 28, weight: .bold))
  Button("Say hi") { vm.onTap() }.padding(.top, 12)
}
.padding(24)
 
// Android (Compose) — emitted by jui build
Column(
  modifier = Modifier.padding(24.dp),
  horizontalAlignment = Alignment.CenterHorizontally,
) {
  Text("Hello, ${vm.name.collectAsState().value}", fontSize = 28.sp, fontWeight = FontWeight.Bold)
  Button(onClick = vm::onTap, modifier = Modifier.padding(top = 12.dp)) { Text("Say hi") }
}
 
// Web (React) — emitted by jui build
<div className="flex flex-col items-center p-6">
  <h1 className="text-[28px] font-bold">Hello, {vm.name}</h1>
  <button className="mt-3" onClick={vm.onTap}>Say hi</button>
</div>
Who it is forTeams that ship the same app on more than one platform and do not want to pay for the same screen three times. Small teams with a lot of AI-driven engineering — every agent reads the same spec, which is the fastest way to make an agent useful on a cross-platform codebase. Not the right tool for: throwaway prototypes, single-platform apps that will never cross over, or teams that already have heavy per-platform codebases they are unwilling to re-architect. The spec discipline is the trade — pay it once, earn for years; skip it and you will not see the benefits.
How it differsSwiftUI / Compose / React Native alone let you write one platform well — JsonUI lets you write the *same thing* once across three. Flutter and React Native also ship 'one codebase, multiple platforms', but they do it by running a single runtime on every device; JsonUI emits native code at build time, so the output is indistinguishable from hand-written SwiftUI or Compose. The closest comparison is a codegen tool like Sourcery or generated SwiftUI, but scoped to cross-platform UI, with a contract-first workflow and an AI-agent surface built in.
Keep going
InstallationThe one-liner that drops the CLI, MCP, and agent pack into place./learn/installation
Hello WorldSee text on screen in 5 minutes on Swift / Kotlin / React./learn/hello-world