{
  "version": 1,
  "width": 720,
  "height": 400,
  "title": "Editor with file tree",
  "description": "Orient a reader in a small project and explain one file. All values are illustrative example data.",
  "elements": [
    {
      "type": "text",
      "x": 36,
      "y": 39,
      "text": "Find the renderer",
      "size": 17,
      "fill": "ink",
      "align": "start",
      "mono": false
    },
    {
      "type": "text",
      "x": 36,
      "y": 62,
      "text": "Illustrative editor layout · not an executable IDE",
      "size": 11,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "line",
      "x": 233,
      "y": 84,
      "x2": 233,
      "y2": 360,
      "arrow": false,
      "dashed": false,
      "stroke": "rule"
    },
    {
      "type": "text",
      "x": 40,
      "y": 112,
      "text": "src/",
      "size": 13,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 40,
      "y": 143,
      "text": "  lib/",
      "size": 13,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 40,
      "y": 174,
      "text": "    scene.ts",
      "size": 13,
      "fill": "accent",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 40,
      "y": 205,
      "text": "    catalog.ts",
      "size": 13,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 40,
      "y": 236,
      "text": "  pages/",
      "size": 13,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 40,
      "y": 267,
      "text": "    index.astro",
      "size": 13,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 40,
      "y": 298,
      "text": "package.json",
      "size": 13,
      "fill": "muted",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 261,
      "y": 108,
      "text": "scene.ts",
      "size": 12,
      "fill": "accent",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 263,
      "y": 153,
      "text": "1",
      "size": 11,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "text",
      "x": 283,
      "y": 153,
      "text": "export function render(",
      "size": 14,
      "fill": "accent",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 263,
      "y": 182,
      "text": "2",
      "size": 11,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "text",
      "x": 283,
      "y": 182,
      "text": "  scene: Scene,",
      "size": 14,
      "fill": "ink",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 263,
      "y": 211,
      "text": "3",
      "size": 11,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "text",
      "x": 283,
      "y": 211,
      "text": "  options: Options",
      "size": 14,
      "fill": "ink",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 263,
      "y": 240,
      "text": "4",
      "size": 11,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "text",
      "x": 283,
      "y": 240,
      "text": ") {",
      "size": 14,
      "fill": "accent",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 263,
      "y": 269,
      "text": "5",
      "size": 11,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "text",
      "x": 283,
      "y": 269,
      "text": "  return toSVG(scene);",
      "size": 14,
      "fill": "ink",
      "align": "start",
      "mono": true
    },
    {
      "type": "text",
      "x": 263,
      "y": 298,
      "text": "6",
      "size": 11,
      "fill": "muted",
      "align": "end",
      "mono": true
    },
    {
      "type": "text",
      "x": 283,
      "y": 298,
      "text": "}",
      "size": 14,
      "fill": "ink",
      "align": "start",
      "mono": true
    }
  ]
}