hello-world.jdf

{
  "$jdf": "1.0.0",
  "footer": {
    "content": "{{title}}  ·  page {{pageNumber}} of {{totalPages}}",
    "style": "muted"
  },
  "meta": {
    "author": "Ugur Kazdal",
    "language": "en",
    "margins": {
      "bottom": 25,
      "left": 22,
      "right": 22,
      "top": 25
    },
    "pageSize": "A4",
    "title": "Hello, JDF",
    "unit": "mm"
  },
  "pages": [
    {
      "elements": [
        {
          "content": "DOCUMENT FORMAT",
          "position": {
            "x": 0,
            "y": 0
          },
          "style": "label",
          "type": "text",
          "width": 166
        },
        {
          "content": "Hello, JDF",
          "heading": 1,
          "position": {
            "x": 0,
            "y": 8
          },
          "style": "h1",
          "tocEntry": "Hello, JDF",
          "tocLevel": 1,
          "type": "text",
          "width": 166
        },
        {
          "content": "A document format that's just JSON. Renders like PDF. Diffs in git. Edits in any text editor. This file you're reading is a real .jdf — view source to see the JSON.",
          "position": {
            "x": 0,
            "y": 30
          },
          "style": "lead",
          "type": "text",
          "width": 166
        },
        {
          "fill": "#2563eb",
          "height": 0.6,
          "position": {
            "x": 0,
            "y": 56
          },
          "shape": "rect",
          "type": "shape",
          "width": 18
        },
        {
          "content": "What it does",
          "heading": 2,
          "position": {
            "x": 0,
            "y": 64
          },
          "style": "h2",
          "tocEntry": "What it does",
          "tocLevel": 2,
          "type": "text",
          "width": 166
        },
        {
          "content": "Open .jdf in any text editor and you see clean JSON. Open it in JDF Reader and you see a beautifully rendered page. Edit either side, the other reflects it.",
          "position": {
            "x": 0,
            "y": 76
          },
          "style": "body",
          "type": "text",
          "width": 166
        },
        {
          "items": [
            {
              "content": "Human-readable JSON — open with cat, grep, jq, VS Code."
            },
            {
              "content": "git diff is real — change a heading, see one line change."
            },
            {
              "content": "Generate from code — JSON.stringify(doc) is your PDF library."
            },
            {
              "content": "JSON Schema validation — autocomplete in your editor, errors in CI."
            },
            {
              "content": "AI-friendly — LLMs read JSON natively, no parser, no broken tables."
            }
          ],
          "listType": "unordered",
          "position": {
            "x": 0,
            "y": 100
          },
          "style": "body",
          "type": "list",
          "width": 166
        },
        {
          "content": "Three surfaces",
          "heading": 2,
          "position": {
            "x": 0,
            "y": 152
          },
          "style": "h2",
          "tocEntry": "Three surfaces",
          "tocLevel": 2,
          "type": "text",
          "width": 166
        },
        {
          "alternatingRowColor": "#f8fafc",
          "borders": {
            "color": "#e2e8f0",
            "inner": true,
            "outer": true,
            "width": 0.3
          },
          "headerStyle": {
            "backgroundColor": "#f1f5f9",
            "color": "#0f172a",
            "fontSize": 10,
            "fontWeight": "bold"
          },
          "headers": [
            "Surface",
            "What",
            "Install"
          ],
          "columns": [
            { "width": 40 },
            { "width": 76 },
            { "width": 50 }
          ],
          "position": {
            "x": 0,
            "y": 164
          },
          "rowStyle": {
            "color": "#334155",
            "fontSize": 10
          },
          "rows": [
            [
              "JDF Reader",
              "Native macOS desktop app",
              "brew install jdf"
            ],
            [
              "jdf.js",
              "JavaScript embed library",
              "npm install @uurtech/jdf"
            ],
            [
              "@uurtech/jdf-cli",
              "CLI for validate / convert",
              "npx @uurtech/jdf-cli validate"
            ]
          ],
          "type": "table",
          "width": 166
        },
        {
          "align": "right",
          "content": "Continued on the next page →",
          "position": {
            "x": 0,
            "y": 235
          },
          "style": "muted",
          "type": "text",
          "width": 166
        }
      ],
      "id": "page-1"
    },
    {
      "elements": [
        {
          "content": "DOCUMENT FORMAT",
          "position": {
            "x": 0,
            "y": 0
          },
          "style": "label",
          "type": "text",
          "width": 166
        },
        {
          "content": "Table of Contents",
          "heading": 1,
          "position": {
            "x": 0,
            "y": 8
          },
          "style": "h1",
          "type": "text",
          "width": 166
        },
        {
          "fill": "#2563eb",
          "height": 0.6,
          "position": {
            "x": 0,
            "y": 32
          },
          "shape": "rect",
          "type": "shape",
          "width": 18
        },
        {
          "depth": 3,
          "position": {
            "x": 0,
            "y": 42
          },
          "style": "body",
          "type": "toc",
          "width": 166
        },
        {
          "content": "Embedding on the web",
          "heading": 2,
          "position": {
            "x": 0,
            "y": 110
          },
          "style": "h2",
          "tocEntry": "Embedding",
          "tocLevel": 2,
          "type": "text",
          "width": 166
        },
        {
          "content": "Three lines of HTML and your document appears, fully styled, on any web page:",
          "position": {
            "x": 0,
            "y": 122
          },
          "style": "body",
          "type": "text",
          "width": 166
        },
        {
          "content": "<link rel=\"stylesheet\" href=\"https://unpkg.com/@uurtech/jdf/dist/jdfjs.css\">\n<script type=\"module\" src=\"https://unpkg.com/@uurtech/jdf\"></script>\n<jdf src=\"/whitepaper.jdf\"></jdf>",
          "position": {
            "x": 0,
            "y": 138
          },
          "style": {
            "backgroundColor": "#f1f5f9",
            "borderRadius": 4,
            "color": "#1e293b",
            "fontFamily": "JetBrains Mono",
            "fontSize": 9,
            "lineHeight": 1.5,
            "padding": 10
          },
          "type": "text",
          "width": 166
        },
        {
          "content": "Try it yourself",
          "heading": 2,
          "position": {
            "x": 0,
            "y": 178
          },
          "style": "h2",
          "tocEntry": "Try it",
          "tocLevel": 2,
          "type": "text",
          "width": 166
        },
        {
          "elements": [
            {
              "content": "Today: nothing meaningful. Tomorrow: anything we want to add. The format is open, the schema is JSON, the renderers are MIT.",
              "style": "body",
              "type": "text"
            }
          ],
          "expanded": false,
          "position": {
            "x": 0,
            "y": 190
          },
          "title": "What does PDF do that JDF can't?",
          "type": "collapsible",
          "width": 166
        }
      ],
      "id": "page-2"
    }
  ],
  "styles": {
    "body": {
      "color": "#334155",
      "fontFamily": "Inter",
      "fontSize": 11,
      "lineHeight": 1.65
    },
    "h1": {
      "color": "#0f172a",
      "fontFamily": "Inter",
      "fontSize": 32,
      "fontWeight": "bold",
      "lineHeight": 1.1
    },
    "h2": {
      "color": "#1e293b",
      "fontFamily": "Inter",
      "fontSize": 16,
      "fontWeight": "bold",
      "lineHeight": 1.3
    },
    "label": {
      "color": "#94a3b8",
      "fontFamily": "Inter",
      "fontSize": 9,
      "fontWeight": "bold"
    },
    "lead": {
      "color": "#475569",
      "fontFamily": "Inter",
      "fontSize": 13,
      "lineHeight": 1.55
    },
    "muted": {
      "color": "#94a3b8",
      "fontFamily": "Inter",
      "fontSize": 9
    }
  }
}