YAML field manual · version 2

Build something useful.

Compose a small interface from 12 components. Add local state, connect a few controls, then download the working HTML.

Try the starter JSON Schema Page format v1

DOCUMENT / V2

01 page Title
02 state Local values
03 view Components

Editing and previewing happen in your browser.

On this page

01 A complete document

A counter in a few lines.

version: 2: Selects the interface format.
page: title names your interface and provides its main heading. Optional eyebrow and description add introductory text.
state: Sets the starting text, number and boolean values.
view: The root component. Nest components inside children.

Paste this document into the workbench. Press the button in the preview to update the counter.

version: 2
page:
  title: Focus counter
state:
  sessions: 0
view:
  type: stack
  children:
    - type: heading
      text: One session at a time.
    - type: metric
      label: Sessions completed
      value: "{{sessions}}"
    - type: button
      label: Complete a session
      action: increment
      target: sessions

02 Connect the pieces

Small, explicit interactions.

01
Declare each value in state. Use a flat map of strings, numbers and booleans.
02
Use "{{sessions}}" to show a value in heading, text, badge, card title or metric value. Quote strings that start with braces.
03
Set bind to a state key. An input edits a string; a toggle changes a boolean.
04
Any component can use when: details to appear only while the boolean state value details is true.
05
Buttons use increment or decrement for numbers, or toggle for booleans. Name the state key with target. The reset action restores all starting values and needs no target.

State keys start with a lowercase letter and use lowercase letters, digits or underscores. Component fields sit directly beside type. Unknown fields and missing or mismatched state keys produce a diagnostic.

03 Component catalog

12 building blocks.

Snippets belong inside view or a container’s children. Declare any referenced state keys in your document first.

`stack`

Stack

Arrange components vertically or horizontally.

childrenRequired: One to 30 nested components.
gap: Spacing: sm, md (default), or lg.
direction: Direction: vertical (default) or horizontal.

type: stack
gap: md
children:
  - type: text
    text: First component

`grid`

Grid

A responsive grid with up to three columns.

childrenRequired: One to 30 nested components.
columns: Column count: 1, 2 (default), or 3.

type: grid
columns: 2
children:
  - type: text
    text: Grid content

`card`

Card

Group related content in a panel.

childrenRequired: One to 30 nested components.
title: Optional title; accepts {{key}} state text.

type: card
title: Overview
children:
  - type: text
    text: Your content

`heading`

Heading

A section heading below the page title.

textRequired: Heading text; accepts {{key}} state text.
level: Heading level: 2 (default) or 3.

type: heading
text: Make it yours
level: 2

`text`

Text

Plain text with optional state interpolation.

textRequired: Plain text; accepts {{key}} state text.
tone: Text tone: default or muted.

type: text
text: Hello, {{name}}!
tone: muted

`badge`

Badge

A compact text label.

textRequired: Badge label; accepts {{key}} state text.

type: badge
text: Ready

`metric`

Metric

A prominent value with a descriptive label.

labelRequired: A short description of the value.
valueRequired: A quoted string; accepts {{key}} state text.

type: metric
label: Count
value: "{{count}}"

`divider`

Divider

A visual separator between groups.

type: divider

`link`

Link

An explicit HTTPS, email, or telephone link.

labelRequired: A meaningful link label.
hrefRequired: HTTPS, mailto:, or tel: only. No fragments or templates.

type: link
label: Read the guide
href: https://example.com/guide

`input`

Input

A text field bound to a string in local state.

labelRequired: Visible field label.
bindRequired: Existing state key whose value is a string.

type: input
label: Your name
bind: name

`toggle`

Toggle

A checkbox bound to a boolean in local state.

labelRequired: Visible checkbox label.
bindRequired: Existing state key whose value is a boolean.

type: toggle
label: Show details
bind: enabled

`button`

Button

Run one of four fixed local state actions.

labelRequired: Visible button label.
actionRequired: increment/decrement a number, toggle a boolean, or reset all state.
target: State key for the action. Required except for reset, which forbids it.
variant: Button appearance: primary (default) or secondary.

type: button
label: Add one
action: increment
target: count

04 Keep what you build

One working HTML file.

01
Save YAML keeps the editable source. Import it later to keep working.
02
Download index.html includes the interface and its local interactions. Open it directly or put it on a static host.
03
Export starts from YAML state. Changes made in the preview do not edit the source. Set the starting values in your YAML before downloading.

Local controls update values in the open document. They do not submit data or save changes after it closes. Links use HTTPS, email or telephone destinations.

Existing landing pages continue to use page format v1.