Skip to content
Ooidget

Open specification · 0.1 Editor's Draft

Interactive UI as data. Rendered alike everywhere.

Ooidget is an open format for user interface, from a single control to an application's whole window. A component is a JSON document: its state, layers drawn from that state, the components it contains and an ECMAScript behaviour. The same file runs on Windows, macOS, Linux, the web, iOS, Android and watches.

Read the specificationYour first component
The Ooidget mark: an ooid's cross-section, layers grown around a nucleus

A component, in full

State, layers that read it, and a behaviour that changes it. No platform code and no build step: a runtime reads this file and draws a toggle that answers the pointer, the keyboard and a screen reader.

An ooid is a grain that grows as layers around a nucleus. An ooidget is layers drawn around its state.

{
  "spec": "0.1",
  "widget": {
    "size": [96, 32],
    "state": { "on": false, "label": "Loop" },
    "role": "switch", "label": "s.label",
    "layers": [
      { "shape": "rect", "radius": 6,
        "effects": [{ "type": "fill", "color": "#2a2b31" }] },
      { "shape": "rect", "radius": 6, "when": "s.on",
        "effects": [{ "type": "fill", "color": "#4a78c0" }] },
      { "text": "s.label", "size": 13,
        "color": "#ececec", "align": "center" }
    ],
    "behaviour": "({ click(s) { return { on: !s.on } } })"
  }
}

What it specifies, and what it does not

Ooidget defines its component model and nothing else. Everything under it is an existing open standard, so a web developer already knows most of the format, and every runtime leans on mature libraries.

ECMAScript

Expressions and behaviours

Conditions, text and computed boxes are JavaScript expressions; behaviours are handler objects that return new state. Sandboxed and deterministic.

CSS · SVG

Layout and drawing

Frames are CSS absolute positioning, rows and columns CSS flexbox; shapes paint as CSS backgrounds and borders; paths are SVG.

W3C

Tokens, colour, access

Design tokens in the DTCG format, CSS Color 4, and WAI-ARIA roles exposed to every platform's screen reader.

One file, every surface

Size classes, an abstract input model, fallbacks and compiled bundles let one component serve a desktop window, a phone, a watch turned by its crown, an appliance's microcontroller and a panel in a headset.

  • Windows
  • macOS
  • Linux
  • Web
  • iOS
  • Android
  • Wear OS
  • watchOS
  • Microcontrollers
  • Spatial (planned)
Open

The specification

CC BY 4.0, with an MIT JSON Schema and conformance suite. Implement it in any language. Read it

AGPL or commercial

Reference runtimes

A Rust core with a C ABI, a WebAssembly web runtime, and bindings for C++, Swift, Kotlin, Go and Node. Licensing

Commercial

Ooidget Studio

The IDE for designing components and whole applications, with live collaboration and agent tooling. Coming with 1.0.