v0.9.0 — Now on npm

One Schema. Every Platform.

Design your interface as JSON, render it natively on web, Android, iOS, and desktop. The complete server-driven UI toolkit.

Open PlaygroundVisual Builder
sdui.design/playground
schema.json
1 {
2 "root": {
3 "type": "column",
4 "properties": {
5 "verticalArrangement": {
6 "type": "spaced_by",
7 "spacing": 12
8 }
9 },
10 "children": [{
11 "type": "text",
12 "properties": {
13 "text": "Hello World",
14 "fontSize": 22,
15 "fontWeight": "bold"
16 }
17 }]
18 }
19 }
Hello World
Rendered with sdui-web
Get Started
Learn More
WebAndroidiOSDesktop
Capabilities

Everything you need for dynamic UIs

01

Single JSON Schema

One portable schema that works across every platform. Define once, render everywhere.

"type": "column", "children": [{ "type": "text" }]
02

Web & React Rendering

Vanilla DOM renderer with zero deps, plus a drop-in React SduiRenderer component with device frame preview.

03Soon

Native Compose UI

Same schema, native Jetpack Compose on Android, iOS, and desktop.

04

Builder Tools

Type-safe Kotlin DSL for backend, visual drag-drop builder for the browser. Build UI trees any way you prefer.

05

Hot Updates

Push UI changes from your backend instantly. No app store releases needed.

06

Fully Extensible

Register custom renderers. Extend the schema with your own component types and properties.

textimageboxcolumnrowlazy_columncustom...
Workflow

Three steps to ship anywhere

01

Design

Kotlin DSL or Playground

Use the type-safe builder API to compose your UI tree, or design visually in the playground.

create { column { text("Hello") { fontSize = 24 fontWeight = bold } } }
02

Export

JSON Schema

Generate a portable JSON schema. Serve it from your backend, CDN, or embed statically.

{ "root": { "type": "column", "children": [{ "type": "text" }] } }
03

Render

Web + React + Native

sdui-web for vanilla JS, sdui-web-react for React, sdui-compose for native. Same schema, every platform.

// Web (vanilla) import { render } from 'sdui-web' render(json, el) // React import { SduiRenderer } from 'sdui-web-react' <SduiRenderer json={schema} />
Ecosystem

The complete toolkit

sdui-core

stable

Shared models, JSON schema, and the programmatic Kotlin builder API.

Kotlinkotlinx.serializationMaven Central

sdui-web

v0.9.0

TypeScript renderer — JSON to DOM elements with inline CSS. Zero deps.

TypeScriptDOMnpm

sdui-web-react

v0.2.0

React bindings — SduiRenderer component, device frame preview, and controls.

ReactTypeScriptnpm

sdui-web-builder

v0.5.0

Visual builder toolkit — drag-drop canvas, palette, properties panel, tree view.

ReactDnD Kitnpm

sdui-compose

soon

Compose Multiplatform — native UI on Android, iOS, and desktop.

ComposeKMPMaven Central

sdui.design

live

This site — docs, interactive playground, and live preview.

Next.jsPlaygroundOpen Source