# Ooidget

> Ooidget is an open specification for interactive user interface components and applications as JSON: state,
> layers drawn from it, children and their layout, and ECMAScript behaviours, rendered alike on desktop, web, mobile
> and wearables. It references ECMAScript, CSS, SVG, the W3C DTCG token format and WAI-ARIA rather than redefining
> them.

Each page below links to its Markdown source. `/llms-full.txt` holds every page in one file.

## Foundations

- [Terminology](/spec/terminology.md): Terms defined by the Ooidget Component Format.
- [Documents and components](/spec/document.md): The component file, the widget object and how components are named and resolved.
- [Expressions](/spec/expressions.md): The ECMAScript expressions documents use for conditions, text and computed values, and the scope they see.

## Drawing

- [Layers](/spec/layers.md): The drawing instructions of a widget - shapes, text, images, SVG, nested components and host-drawn boxes - and their common properties.
- [Effects and colour](/spec/effects.md): How shapes are painted - fills, strokes, gradients, shadows - in terms of CSS and SVG, and the SVG subset.

## Composition

- [Children](/spec/children.md): Components contained in a component - placement, binding of state, repetition over arrays and conditional presence.
- [Layout](/spec/layout.md): Arranging children in rows and columns as CSS Flexible Box Layout does, size classes and adaptive layout.
- [Styles and design tokens](/spec/styles-tokens.md): Shared looks a layer names, and design tokens in the W3C Design Tokens Community Group format.

## Interaction

- [Behaviours](/spec/behaviours.md): Event handlers in ECMAScript that turn input into changes of state, shared behaviours, and commands to the host.
- [Input, focus and accessibility](/spec/input.md): Hit-testing, regions, the abstract input model across mouse, touch, rotary and spatial devices, focus and accessibility.
- [Motion](/spec/motion.md): Named motions that ease view values over time with CSS easing functions and springs.
- [Interface and tests](/spec/interface.md): What a component declares to its host (props as JSON Schema, events and methods), how a host sets state and calls methods, and the tests a component carries.

## Runtimes

- [Host interface](/spec/host.md): What a runtime asks of the application embedding it - components, assets, slots, primitives, painters and commands.
- [Processing model](/spec/processing.md): How a runtime builds the instance tree, lays it out, draws it and handles an event, step by step.
- [Extensions and fallbacks](/spec/extensions.md): How the format is extended by vendors, and what a runtime does with what it does not understand.
- [Conformance](/spec/conformance.md): Conformance classes for documents and runtimes, the profiles a runtime may claim, and the conformance test suite.
- [Embedded devices](/spec/embedded.md): The Embedded profile - what a document and a runtime must observe to run on microcontrollers with no operating system, a few hundred kilobytes of RAM and a display without a GPU.

## Appendices

- [References](/spec/references.md): The specifications this one depends on (normative) and the work it draws on (informative).
- [Changes](/spec/changes.md): Changes between versions of this specification, and from the format as Ooidget UI implemented it.

## Getting started

- [Your first component](/docs/first-component.md): A toggle button, from an empty file to a widget that responds to clicks, step by step.

## Embedding

- [Embedding from C and C++](/docs/embedding-c.md): Loading components and producing draw lists through the reference core's C ABI.

## Pages

- [A knob, the source](/examples/knob.md): The project folder of the a knob example: each component as JSON, each shared behaviour as JavaScript.
- [A transport bar, the source](/examples/transport.md): The project folder of the a transport bar example: each component as JSON, each shared behaviour as JavaScript.
- [Licensing](/licensing.md): How the Ooidget specification, the reference implementations and Ooidget Studio are licensed.
- [Ooidget Component Format 0.1](/spec.md): The normative specification of the Ooidget Component Format, a JSON format for interactive user interface components and applications.
- [Ooidget for developers](/docs.md): What Ooidget is, how the pieces fit, and where to start.
- [The Ooidget Acid test, the source](/examples/acid.md): The project folder of the the ooidget acid test example: each component as JSON, each shared behaviour as JavaScript.