Quickstart

A Joy DOM document is plain JSON. Write it once, then render it natively on the web, Apple platforms, or Android. This page writes a minimal document; pick your platform below to render it.

Write a document

Save this as hello.json. Every document has the same four top-level fields:

{
  "version": 1,
  "style": {
    ".stack": {
      "display": "flex",
      "flexDirection": "column",
      "gap": {
        "value": 12,
        "unit": "px"
      },
      "padding": {
        "value": 24,
        "unit": "px"
      }
    },
    "h1": {
      "display": "flex",
      "fontSize": {
        "value": 32,
        "unit": "px"
      }
    },
    "p": {
      "display": "flex",
      "fontSize": {
        "value": 16,
        "unit": "px"
      },
      "color": "#475569"
    }
  },
  "breakpoints": [],
  "layout": {
    "type": "div",
    "props": {
      "className": ["stack"]
    },
    "children": [
      {
        "type": "h1",
        "children": ["Hello Joy DOM"]
      },
      {
        "type": "p",
        "children": ["Rendered natively from JSON."]
      }
    ]
  }
}