[
  {
    "component": "TextContainer",
    "idyllASTNode": {
      "id": 12,
      "type": "component",
      "name": "TextContainer",
      "children": [
        {
          "id": 13,
          "type": "component",
          "name": "h1",
          "children": [
            {
              "id": 14,
              "type": "textnode",
              "value": "Welcome to Idyll"
            }
          ]
        },
        {
          "id": 15,
          "type": "component",
          "name": "h3",
          "children": [
            {
              "id": 16,
              "type": "textnode",
              "value": "Idyll is a language for creating interactive documents on the web."
            }
          ]
        },
        {
          "id": 17,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 18,
              "type": "textnode",
              "value": "This document is being rendered from "
            },
            {
              "id": 19,
              "type": "component",
              "name": "strong",
              "children": [
                {
                  "id": 20,
                  "type": "textnode",
                  "value": "Idyll markup"
                }
              ]
            },
            {
              "id": 21,
              "type": "textnode",
              "value": ". If you’ve used "
            },
            {
              "id": 22,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://daringfireball.net/projects/markdown/"
                }
              },
              "children": [
                {
                  "id": 23,
                  "type": "textnode",
                  "value": "markdown"
                }
              ]
            },
            {
              "id": 24,
              "type": "textnode",
              "value": ", Idyll should look pretty familiar, but it has some additional features. Write text in the box on the left and the output on the right will automatically update."
            }
          ]
        },
        {
          "id": 25,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 26,
              "type": "textnode",
              "value": "To make things a little more interesting you can add JavaScript components to your text.\nFor example, a "
            },
            {
              "id": 27,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 28,
                  "type": "textnode",
                  "value": "[Chart /]"
                }
              ]
            },
            {
              "id": 29,
              "type": "textnode",
              "value": " component can be used to render a simple visualization:"
            }
          ]
        },
        {
          "id": 30,
          "type": "component",
          "name": "Chart",
          "properties": {
            "type": {
              "type": "value",
              "value": "scatter"
            }
          },
          "children": []
        },
        {
          "id": 31,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 32,
              "type": "textnode",
              "value": "Try changing the chart’s type from "
            },
            {
              "id": 33,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 34,
                  "type": "textnode",
                  "value": "scatter"
                }
              ]
            },
            {
              "id": 35,
              "type": "textnode",
              "value": " to "
            },
            {
              "id": 36,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 37,
                  "type": "textnode",
                  "value": "line"
                }
              ]
            },
            {
              "id": 38,
              "type": "textnode",
              "value": ", "
            },
            {
              "id": 39,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 40,
                  "type": "textnode",
                  "value": "area"
                }
              ]
            },
            {
              "id": 41,
              "type": "textnode",
              "value": ", or "
            },
            {
              "id": 42,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 43,
                  "type": "textnode",
                  "value": "pie"
                }
              ]
            },
            {
              "id": 44,
              "type": "textnode",
              "value": "."
            }
          ]
        },
        {
          "id": 45,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 46,
              "type": "textnode",
              "value": "A component’s properties can be strings (“I’m a string!”), numbers (1.569), or evaluated JavaScript expressions ("
            },
            {
              "id": 47,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 48,
                  "type": "textnode",
                  "value": "`2 * Math.PI`"
                }
              ]
            },
            {
              "id": 49,
              "type": "textnode",
              "value": ")."
            }
          ]
        },
        {
          "id": 50,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 51,
              "type": "textnode",
              "value": "There are a number of components available — see "
            },
            {
              "id": 52,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/components-built-in"
                }
              },
              "children": [
                {
                  "id": 53,
                  "type": "textnode",
                  "value": "Idyll’s documentation"
                }
              ]
            },
            {
              "id": 54,
              "type": "textnode",
              "value": " for a full list — Additional components can be installed via "
            },
            {
              "id": 55,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 56,
                  "type": "textnode",
                  "value": "npm"
                }
              ]
            },
            {
              "id": 57,
              "type": "textnode",
              "value": " (any React component should work), and if you are comfortable with JavaScript you can write "
            },
            {
              "id": 58,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/components-custom"
                }
              },
              "children": [
                {
                  "id": 59,
                  "type": "textnode",
                  "value": "custom components"
                }
              ]
            },
            {
              "id": 60,
              "type": "textnode",
              "value": " as well."
            }
          ]
        },
        {
          "id": 61,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 62,
              "type": "textnode",
              "value": "Idyll also provides a reactive variable system that can be used to dynamically update the text based on input from a reader."
            }
          ]
        },
        {
          "id": 63,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 64,
              "type": "textnode",
              "value": "Instantiating a variable is similar to instantiating a component:"
            }
          ]
        },
        {
          "id": 65,
          "type": "component",
          "name": "code",
          "children": [
            {
              "id": 66,
              "type": "textnode",
              "value": "[var name:\"x\" value:1 /]"
            }
          ]
        },
        {
          "id": 67,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 68,
              "type": "textnode",
              "value": "Once you’ve created a variable, it can be displayed inline with text\n(x = "
            },
            {
              "id": 69,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "variable",
                  "value": "x"
                }
              },
              "children": []
            },
            {
              "id": 70,
              "type": "textnode",
              "value": "),\nor be used to parameterize components. Derived variables can be used to create values that depend on other variables, similar to a formula in Excel:"
            }
          ]
        },
        {
          "id": 71,
          "type": "component",
          "name": "code",
          "children": [
            {
              "id": 72,
              "type": "textnode",
              "value": "[derived name:\"xSquared\" value:`x * x` /]"
            }
          ]
        },
        {
          "id": 73,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 74,
              "type": "textnode",
              "value": "Here I bind the value of "
            },
            {
              "id": 75,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 76,
                  "type": "textnode",
                  "value": "x"
                }
              ]
            },
            {
              "id": 77,
              "type": "textnode",
              "value": " to a range slider. Move the slider and watch the variables update."
            }
          ]
        },
        {
          "id": 78,
          "type": "component",
          "name": "Range",
          "properties": {
            "value": {
              "type": "variable",
              "value": "x"
            },
            "min": {
              "type": "value",
              "value": 0
            },
            "max": {
              "type": "value",
              "value": 100
            }
          },
          "children": []
        },
        {
          "id": 79,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 80,
              "type": "component",
              "name": "equation",
              "children": [
                {
                  "id": 81,
                  "type": "textnode",
                  "value": "x"
                }
              ]
            },
            {
              "id": 82,
              "type": "textnode",
              "value": ":\n "
            },
            {
              "id": 83,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "expression",
                  "value": "x"
                }
              },
              "children": []
            }
          ]
        },
        {
          "id": 84,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 85,
              "type": "component",
              "name": "equation",
              "children": [
                {
                  "id": 86,
                  "type": "textnode",
                  "value": "x^2"
                }
              ]
            },
            {
              "id": 87,
              "type": "textnode",
              "value": ":"
            },
            {
              "id": 88,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "expression",
                  "value": "xSquared"
                }
              },
              "children": []
            }
          ]
        },
        {
          "id": 89,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 90,
              "type": "textnode",
              "value": "Test expression, displays:"
            }
          ]
        },
        {
          "id": 91,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "varDisplay"
            },
            "value": {
              "type": "expression",
              "value": "x"
            }
          },
          "children": []
        },
        {
          "id": 92,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "derivedVarDisplay"
            },
            "value": {
              "type": "expression",
              "value": "xSquared"
            }
          },
          "children": []
        },
        {
          "id": 93,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "derivedVarDisplay2"
            },
            "value": {
              "type": "expression",
              "value": "xCubed"
            }
          },
          "children": []
        },
        {
          "id": 94,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "strDisplay"
            },
            "value": {
              "type": "expression",
              "value": "\"string\""
            }
          },
          "children": []
        },
        {
          "id": 95,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "staticObjectDisplay"
            },
            "value": {
              "type": "expression",
              "value": "{ static: \"object\" }"
            }
          },
          "children": []
        },
        {
          "id": 96,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "dynamicObjectDisplay"
            },
            "value": {
              "type": "expression",
              "value": "{ dynamic: x }"
            }
          },
          "children": []
        },
        {
          "id": 97,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "dataDisplay"
            },
            "value": {
              "type": "expression",
              "value": "myData"
            }
          },
          "children": []
        },
        {
          "id": 98,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareDataDisplay"
            },
            "value": {
              "type": "variable",
              "value": "myData"
            }
          },
          "children": []
        },
        {
          "id": 99,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareVarDisplay"
            },
            "value": {
              "type": "variable",
              "value": "x"
            }
          },
          "children": []
        },
        {
          "id": 100,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareDerivedDisplay"
            },
            "value": {
              "type": "variable",
              "value": "xSquared"
            }
          },
          "children": []
        },
        {
          "id": 101,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareDerivedDisplay2"
            },
            "value": {
              "type": "variable",
              "value": "xCubed"
            }
          },
          "children": []
        },
        {
          "id": 102,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "objectVarDisplay"
            },
            "value": {
              "type": "expression",
              "value": " objectVar "
            }
          },
          "children": []
        },
        {
          "id": 103,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareObjectVarDisplay"
            },
            "value": {
              "type": "variable",
              "value": "objectVar"
            }
          },
          "children": []
        },
        {
          "id": 104,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "arrayVarDisplay"
            },
            "value": {
              "type": "expression",
              "value": " arrayVar "
            }
          },
          "children": []
        },
        {
          "id": 105,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareArrayVarDisplay"
            },
            "value": {
              "type": "variable",
              "value": "arrayVar"
            }
          },
          "children": []
        },
        {
          "id": 106,
          "type": "component",
          "name": "br",
          "children": []
        },
        {
          "id": 107,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 108,
              "type": "textnode",
              "value": "Here is an example of how you could use a variable to control the frequency of a sine wave:"
            }
          ]
        },
        {
          "id": 109,
          "type": "component",
          "name": "Chart",
          "properties": {
            "equation": {
              "type": "expression",
              "value": "(t) => Math.sin(t * frequency)"
            },
            "domain": {
              "type": "expression",
              "value": "[0, 2 * Math.PI]"
            },
            "samplePoints": {
              "type": "value",
              "value": 1000
            }
          },
          "children": []
        },
        {
          "id": 110,
          "type": "component",
          "name": "Range",
          "properties": {
            "value": {
              "type": "variable",
              "value": "frequency"
            },
            "min": {
              "type": "value",
              "value": 0.5
            },
            "max": {
              "type": "expression",
              "value": "2 * Math.PI"
            },
            "step": {
              "type": "value",
              "value": 0.0001
            }
          },
          "children": []
        },
        {
          "id": 111,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 112,
              "type": "component",
              "name": "Display",
              "properties": {
                "id": {
                  "type": "value",
                  "value": "lateVarDisplay"
                },
                "value": {
                  "type": "variable",
                  "value": "lateVar"
                }
              },
              "children": []
            },
            {
              "id": 113,
              "type": "textnode",
              "value": "\nLate Var Range:"
            }
          ]
        },
        {
          "id": 114,
          "type": "component",
          "name": "Range",
          "properties": {
            "value": {
              "type": "variable",
              "value": "lateVar"
            },
            "min": {
              "type": "value",
              "value": 2
            },
            "max": {
              "type": "value",
              "value": 100
            }
          },
          "children": []
        },
        {
          "id": 115,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 116,
              "type": "textnode",
              "value": "Read more about Idyll at "
            },
            {
              "id": 117,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/"
                }
              },
              "children": [
                {
                  "id": 118,
                  "type": "textnode",
                  "value": "https://idyll-lang.github.io/"
                }
              ]
            },
            {
              "id": 119,
              "type": "textnode",
              "value": ", and come say “Hi!” in our "
            },
            {
              "id": 120,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://gitter.im/idyll-lang/Lobby"
                }
              },
              "children": [
                {
                  "id": 121,
                  "type": "textnode",
                  "value": "chatroom on gitter"
                }
              ]
            },
            {
              "id": 122,
              "type": "textnode",
              "value": "."
            }
          ]
        }
      ]
    },
    "children": [
      {
        "component": "h1",
        "idyllASTNode": {
          "id": 13,
          "type": "component",
          "name": "h1",
          "children": [
            {
              "id": 14,
              "type": "textnode",
              "value": "Welcome to Idyll"
            }
          ]
        },
        "children": [
          {
            "id": 14,
            "type": "textnode",
            "value": "Welcome to Idyll"
          }
        ]
      },
      {
        "component": "h3",
        "idyllASTNode": {
          "id": 15,
          "type": "component",
          "name": "h3",
          "children": [
            {
              "id": 16,
              "type": "textnode",
              "value": "Idyll is a language for creating interactive documents on the web."
            }
          ]
        },
        "children": [
          {
            "id": 16,
            "type": "textnode",
            "value": "Idyll is a language for creating interactive documents on the web."
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 17,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 18,
              "type": "textnode",
              "value": "This document is being rendered from "
            },
            {
              "id": 19,
              "type": "component",
              "name": "strong",
              "children": [
                {
                  "id": 20,
                  "type": "textnode",
                  "value": "Idyll markup"
                }
              ]
            },
            {
              "id": 21,
              "type": "textnode",
              "value": ". If you’ve used "
            },
            {
              "id": 22,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://daringfireball.net/projects/markdown/"
                }
              },
              "children": [
                {
                  "id": 23,
                  "type": "textnode",
                  "value": "markdown"
                }
              ]
            },
            {
              "id": 24,
              "type": "textnode",
              "value": ", Idyll should look pretty familiar, but it has some additional features. Write text in the box on the left and the output on the right will automatically update."
            }
          ]
        },
        "children": [
          {
            "id": 18,
            "type": "textnode",
            "value": "This document is being rendered from "
          },
          {
            "component": "strong",
            "idyllASTNode": {
              "id": 19,
              "type": "component",
              "name": "strong",
              "children": [
                {
                  "id": 20,
                  "type": "textnode",
                  "value": "Idyll markup"
                }
              ]
            },
            "children": [
              {
                "id": 20,
                "type": "textnode",
                "value": "Idyll markup"
              }
            ]
          },
          {
            "id": 21,
            "type": "textnode",
            "value": ". If you’ve used "
          },
          {
            "component": "a",
            "idyllASTNode": {
              "id": 22,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://daringfireball.net/projects/markdown/"
                }
              },
              "children": [
                {
                  "id": 23,
                  "type": "textnode",
                  "value": "markdown"
                }
              ]
            },
            "href": "https://daringfireball.net/projects/markdown/",
            "children": [
              {
                "id": 23,
                "type": "textnode",
                "value": "markdown"
              }
            ]
          },
          {
            "id": 24,
            "type": "textnode",
            "value": ", Idyll should look pretty familiar, but it has some additional features. Write text in the box on the left and the output on the right will automatically update."
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 25,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 26,
              "type": "textnode",
              "value": "To make things a little more interesting you can add JavaScript components to your text.\nFor example, a "
            },
            {
              "id": 27,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 28,
                  "type": "textnode",
                  "value": "[Chart /]"
                }
              ]
            },
            {
              "id": 29,
              "type": "textnode",
              "value": " component can be used to render a simple visualization:"
            }
          ]
        },
        "children": [
          {
            "id": 26,
            "type": "textnode",
            "value": "To make things a little more interesting you can add JavaScript components to your text.\nFor example, a "
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 27,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 28,
                  "type": "textnode",
                  "value": "[Chart /]"
                }
              ]
            },
            "children": [
              {
                "id": 28,
                "type": "textnode",
                "value": "[Chart /]"
              }
            ]
          },
          {
            "id": 29,
            "type": "textnode",
            "value": " component can be used to render a simple visualization:"
          }
        ]
      },
      {
        "component": "Chart",
        "idyllASTNode": {
          "id": 30,
          "type": "component",
          "name": "Chart",
          "properties": {
            "type": {
              "type": "value",
              "value": "scatter"
            }
          },
          "children": []
        },
        "type": "scatter",
        "children": []
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 31,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 32,
              "type": "textnode",
              "value": "Try changing the chart’s type from "
            },
            {
              "id": 33,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 34,
                  "type": "textnode",
                  "value": "scatter"
                }
              ]
            },
            {
              "id": 35,
              "type": "textnode",
              "value": " to "
            },
            {
              "id": 36,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 37,
                  "type": "textnode",
                  "value": "line"
                }
              ]
            },
            {
              "id": 38,
              "type": "textnode",
              "value": ", "
            },
            {
              "id": 39,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 40,
                  "type": "textnode",
                  "value": "area"
                }
              ]
            },
            {
              "id": 41,
              "type": "textnode",
              "value": ", or "
            },
            {
              "id": 42,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 43,
                  "type": "textnode",
                  "value": "pie"
                }
              ]
            },
            {
              "id": 44,
              "type": "textnode",
              "value": "."
            }
          ]
        },
        "children": [
          {
            "id": 32,
            "type": "textnode",
            "value": "Try changing the chart’s type from "
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 33,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 34,
                  "type": "textnode",
                  "value": "scatter"
                }
              ]
            },
            "children": [
              {
                "id": 34,
                "type": "textnode",
                "value": "scatter"
              }
            ]
          },
          {
            "id": 35,
            "type": "textnode",
            "value": " to "
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 36,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 37,
                  "type": "textnode",
                  "value": "line"
                }
              ]
            },
            "children": [
              {
                "id": 37,
                "type": "textnode",
                "value": "line"
              }
            ]
          },
          {
            "id": 38,
            "type": "textnode",
            "value": ", "
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 39,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 40,
                  "type": "textnode",
                  "value": "area"
                }
              ]
            },
            "children": [
              {
                "id": 40,
                "type": "textnode",
                "value": "area"
              }
            ]
          },
          {
            "id": 41,
            "type": "textnode",
            "value": ", or "
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 42,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 43,
                  "type": "textnode",
                  "value": "pie"
                }
              ]
            },
            "children": [
              {
                "id": 43,
                "type": "textnode",
                "value": "pie"
              }
            ]
          },
          {
            "id": 44,
            "type": "textnode",
            "value": "."
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 45,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 46,
              "type": "textnode",
              "value": "A component’s properties can be strings (“I’m a string!”), numbers (1.569), or evaluated JavaScript expressions ("
            },
            {
              "id": 47,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 48,
                  "type": "textnode",
                  "value": "`2 * Math.PI`"
                }
              ]
            },
            {
              "id": 49,
              "type": "textnode",
              "value": ")."
            }
          ]
        },
        "children": [
          {
            "id": 46,
            "type": "textnode",
            "value": "A component’s properties can be strings (“I’m a string!”), numbers (1.569), or evaluated JavaScript expressions ("
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 47,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 48,
                  "type": "textnode",
                  "value": "`2 * Math.PI`"
                }
              ]
            },
            "children": [
              {
                "id": 48,
                "type": "textnode",
                "value": "`2 * Math.PI`"
              }
            ]
          },
          {
            "id": 49,
            "type": "textnode",
            "value": ")."
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 50,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 51,
              "type": "textnode",
              "value": "There are a number of components available — see "
            },
            {
              "id": 52,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/components-built-in"
                }
              },
              "children": [
                {
                  "id": 53,
                  "type": "textnode",
                  "value": "Idyll’s documentation"
                }
              ]
            },
            {
              "id": 54,
              "type": "textnode",
              "value": " for a full list — Additional components can be installed via "
            },
            {
              "id": 55,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 56,
                  "type": "textnode",
                  "value": "npm"
                }
              ]
            },
            {
              "id": 57,
              "type": "textnode",
              "value": " (any React component should work), and if you are comfortable with JavaScript you can write "
            },
            {
              "id": 58,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/components-custom"
                }
              },
              "children": [
                {
                  "id": 59,
                  "type": "textnode",
                  "value": "custom components"
                }
              ]
            },
            {
              "id": 60,
              "type": "textnode",
              "value": " as well."
            }
          ]
        },
        "children": [
          {
            "id": 51,
            "type": "textnode",
            "value": "There are a number of components available — see "
          },
          {
            "component": "a",
            "idyllASTNode": {
              "id": 52,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/components-built-in"
                }
              },
              "children": [
                {
                  "id": 53,
                  "type": "textnode",
                  "value": "Idyll’s documentation"
                }
              ]
            },
            "href": "https://idyll-lang.github.io/components-built-in",
            "children": [
              {
                "id": 53,
                "type": "textnode",
                "value": "Idyll’s documentation"
              }
            ]
          },
          {
            "id": 54,
            "type": "textnode",
            "value": " for a full list — Additional components can be installed via "
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 55,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 56,
                  "type": "textnode",
                  "value": "npm"
                }
              ]
            },
            "children": [
              {
                "id": 56,
                "type": "textnode",
                "value": "npm"
              }
            ]
          },
          {
            "id": 57,
            "type": "textnode",
            "value": " (any React component should work), and if you are comfortable with JavaScript you can write "
          },
          {
            "component": "a",
            "idyllASTNode": {
              "id": 58,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/components-custom"
                }
              },
              "children": [
                {
                  "id": 59,
                  "type": "textnode",
                  "value": "custom components"
                }
              ]
            },
            "href": "https://idyll-lang.github.io/components-custom",
            "children": [
              {
                "id": 59,
                "type": "textnode",
                "value": "custom components"
              }
            ]
          },
          {
            "id": 60,
            "type": "textnode",
            "value": " as well."
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 61,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 62,
              "type": "textnode",
              "value": "Idyll also provides a reactive variable system that can be used to dynamically update the text based on input from a reader."
            }
          ]
        },
        "children": [
          {
            "id": 62,
            "type": "textnode",
            "value": "Idyll also provides a reactive variable system that can be used to dynamically update the text based on input from a reader."
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 63,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 64,
              "type": "textnode",
              "value": "Instantiating a variable is similar to instantiating a component:"
            }
          ]
        },
        "children": [
          {
            "id": 64,
            "type": "textnode",
            "value": "Instantiating a variable is similar to instantiating a component:"
          }
        ]
      },
      {
        "component": "code",
        "idyllASTNode": {
          "id": 65,
          "type": "component",
          "name": "code",
          "children": [
            {
              "id": 66,
              "type": "textnode",
              "value": "[var name:\"x\" value:1 /]"
            }
          ]
        },
        "children": [
          {
            "id": 66,
            "type": "textnode",
            "value": "[var name:\"x\" value:1 /]"
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 67,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 68,
              "type": "textnode",
              "value": "Once you’ve created a variable, it can be displayed inline with text\n(x = "
            },
            {
              "id": 69,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "variable",
                  "value": "x"
                }
              },
              "children": []
            },
            {
              "id": 70,
              "type": "textnode",
              "value": "),\nor be used to parameterize components. Derived variables can be used to create values that depend on other variables, similar to a formula in Excel:"
            }
          ]
        },
        "children": [
          {
            "id": 68,
            "type": "textnode",
            "value": "Once you’ve created a variable, it can be displayed inline with text\n(x = "
          },
          {
            "component": "Display",
            "idyllASTNode": {
              "id": 69,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "variable",
                  "value": "x"
                }
              },
              "children": []
            },
            "__vars__": {
              "var": "x"
            },
            "var": "x",
            "children": []
          },
          {
            "id": 70,
            "type": "textnode",
            "value": "),\nor be used to parameterize components. Derived variables can be used to create values that depend on other variables, similar to a formula in Excel:"
          }
        ]
      },
      {
        "component": "code",
        "idyllASTNode": {
          "id": 71,
          "type": "component",
          "name": "code",
          "children": [
            {
              "id": 72,
              "type": "textnode",
              "value": "[derived name:\"xSquared\" value:`x * x` /]"
            }
          ]
        },
        "children": [
          {
            "id": 72,
            "type": "textnode",
            "value": "[derived name:\"xSquared\" value:`x * x` /]"
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 73,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 74,
              "type": "textnode",
              "value": "Here I bind the value of "
            },
            {
              "id": 75,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 76,
                  "type": "textnode",
                  "value": "x"
                }
              ]
            },
            {
              "id": 77,
              "type": "textnode",
              "value": " to a range slider. Move the slider and watch the variables update."
            }
          ]
        },
        "children": [
          {
            "id": 74,
            "type": "textnode",
            "value": "Here I bind the value of "
          },
          {
            "component": "code",
            "idyllASTNode": {
              "id": 75,
              "type": "component",
              "name": "code",
              "children": [
                {
                  "id": 76,
                  "type": "textnode",
                  "value": "x"
                }
              ]
            },
            "children": [
              {
                "id": 76,
                "type": "textnode",
                "value": "x"
              }
            ]
          },
          {
            "id": 77,
            "type": "textnode",
            "value": " to a range slider. Move the slider and watch the variables update."
          }
        ]
      },
      {
        "component": "Range",
        "idyllASTNode": {
          "id": 78,
          "type": "component",
          "name": "Range",
          "properties": {
            "value": {
              "type": "variable",
              "value": "x"
            },
            "min": {
              "type": "value",
              "value": 0
            },
            "max": {
              "type": "value",
              "value": 100
            }
          },
          "children": []
        },
        "__vars__": {
          "value": "x"
        },
        "value": "x",
        "min": 0,
        "max": 100,
        "children": []
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 79,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 80,
              "type": "component",
              "name": "equation",
              "children": [
                {
                  "id": 81,
                  "type": "textnode",
                  "value": "x"
                }
              ]
            },
            {
              "id": 82,
              "type": "textnode",
              "value": ":\n "
            },
            {
              "id": 83,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "expression",
                  "value": "x"
                }
              },
              "children": []
            }
          ]
        },
        "children": [
          {
            "component": "equation",
            "idyllASTNode": {
              "id": 80,
              "type": "component",
              "name": "equation",
              "children": [
                {
                  "id": 81,
                  "type": "textnode",
                  "value": "x"
                }
              ]
            },
            "children": [
              {
                "id": 81,
                "type": "textnode",
                "value": "x"
              }
            ]
          },
          {
            "id": 82,
            "type": "textnode",
            "value": ":\n "
          },
          {
            "component": "Display",
            "idyllASTNode": {
              "id": 83,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "expression",
                  "value": "x"
                }
              },
              "children": []
            },
            "__expr__": {
              "var": "x"
            },
            "var": "x",
            "children": []
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 84,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 85,
              "type": "component",
              "name": "equation",
              "children": [
                {
                  "id": 86,
                  "type": "textnode",
                  "value": "x^2"
                }
              ]
            },
            {
              "id": 87,
              "type": "textnode",
              "value": ":"
            },
            {
              "id": 88,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "expression",
                  "value": "xSquared"
                }
              },
              "children": []
            }
          ]
        },
        "children": [
          {
            "component": "equation",
            "idyllASTNode": {
              "id": 85,
              "type": "component",
              "name": "equation",
              "children": [
                {
                  "id": 86,
                  "type": "textnode",
                  "value": "x^2"
                }
              ]
            },
            "children": [
              {
                "id": 86,
                "type": "textnode",
                "value": "x^2"
              }
            ]
          },
          {
            "id": 87,
            "type": "textnode",
            "value": ":"
          },
          {
            "component": "Display",
            "idyllASTNode": {
              "id": 88,
              "type": "component",
              "name": "Display",
              "properties": {
                "var": {
                  "type": "expression",
                  "value": "xSquared"
                }
              },
              "children": []
            },
            "__expr__": {
              "var": "xSquared"
            },
            "var": "xSquared",
            "children": []
          }
        ]
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 89,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 90,
              "type": "textnode",
              "value": "Test expression, displays:"
            }
          ]
        },
        "children": [
          {
            "id": 90,
            "type": "textnode",
            "value": "Test expression, displays:"
          }
        ]
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 91,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "varDisplay"
            },
            "value": {
              "type": "expression",
              "value": "x"
            }
          },
          "children": []
        },
        "id": "varDisplay",
        "__expr__": {
          "value": "x"
        },
        "value": "x",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 92,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "derivedVarDisplay"
            },
            "value": {
              "type": "expression",
              "value": "xSquared"
            }
          },
          "children": []
        },
        "id": "derivedVarDisplay",
        "__expr__": {
          "value": "xSquared"
        },
        "value": "xSquared",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 93,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "derivedVarDisplay2"
            },
            "value": {
              "type": "expression",
              "value": "xCubed"
            }
          },
          "children": []
        },
        "id": "derivedVarDisplay2",
        "__expr__": {
          "value": "xCubed"
        },
        "value": "xCubed",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 94,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "strDisplay"
            },
            "value": {
              "type": "expression",
              "value": "\"string\""
            }
          },
          "children": []
        },
        "id": "strDisplay",
        "__expr__": {
          "value": "\"string\""
        },
        "value": "\"string\"",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 95,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "staticObjectDisplay"
            },
            "value": {
              "type": "expression",
              "value": "{ static: \"object\" }"
            }
          },
          "children": []
        },
        "id": "staticObjectDisplay",
        "__expr__": {
          "value": "{ static: \"object\" }"
        },
        "value": "{ static: \"object\" }",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 96,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "dynamicObjectDisplay"
            },
            "value": {
              "type": "expression",
              "value": "{ dynamic: x }"
            }
          },
          "children": []
        },
        "id": "dynamicObjectDisplay",
        "__expr__": {
          "value": "{ dynamic: x }"
        },
        "value": "{ dynamic: x }",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 97,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "dataDisplay"
            },
            "value": {
              "type": "expression",
              "value": "myData"
            }
          },
          "children": []
        },
        "id": "dataDisplay",
        "__expr__": {
          "value": "myData"
        },
        "value": "myData",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 98,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareDataDisplay"
            },
            "value": {
              "type": "variable",
              "value": "myData"
            }
          },
          "children": []
        },
        "id": "bareDataDisplay",
        "__vars__": {
          "value": "myData"
        },
        "value": "myData",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 99,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareVarDisplay"
            },
            "value": {
              "type": "variable",
              "value": "x"
            }
          },
          "children": []
        },
        "id": "bareVarDisplay",
        "__vars__": {
          "value": "x"
        },
        "value": "x",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 100,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareDerivedDisplay"
            },
            "value": {
              "type": "variable",
              "value": "xSquared"
            }
          },
          "children": []
        },
        "id": "bareDerivedDisplay",
        "__vars__": {
          "value": "xSquared"
        },
        "value": "xSquared",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 101,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareDerivedDisplay2"
            },
            "value": {
              "type": "variable",
              "value": "xCubed"
            }
          },
          "children": []
        },
        "id": "bareDerivedDisplay2",
        "__vars__": {
          "value": "xCubed"
        },
        "value": "xCubed",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 102,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "objectVarDisplay"
            },
            "value": {
              "type": "expression",
              "value": " objectVar "
            }
          },
          "children": []
        },
        "id": "objectVarDisplay",
        "__expr__": {
          "value": " objectVar "
        },
        "value": " objectVar ",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 103,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareObjectVarDisplay"
            },
            "value": {
              "type": "variable",
              "value": "objectVar"
            }
          },
          "children": []
        },
        "id": "bareObjectVarDisplay",
        "__vars__": {
          "value": "objectVar"
        },
        "value": "objectVar",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 104,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "arrayVarDisplay"
            },
            "value": {
              "type": "expression",
              "value": " arrayVar "
            }
          },
          "children": []
        },
        "id": "arrayVarDisplay",
        "__expr__": {
          "value": " arrayVar "
        },
        "value": " arrayVar ",
        "children": []
      },
      {
        "component": "Display",
        "idyllASTNode": {
          "id": 105,
          "type": "component",
          "name": "Display",
          "properties": {
            "id": {
              "type": "value",
              "value": "bareArrayVarDisplay"
            },
            "value": {
              "type": "variable",
              "value": "arrayVar"
            }
          },
          "children": []
        },
        "id": "bareArrayVarDisplay",
        "__vars__": {
          "value": "arrayVar"
        },
        "value": "arrayVar",
        "children": []
      },
      {
        "component": "br",
        "idyllASTNode": {
          "id": 106,
          "type": "component",
          "name": "br",
          "children": []
        },
        "children": []
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 107,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 108,
              "type": "textnode",
              "value": "Here is an example of how you could use a variable to control the frequency of a sine wave:"
            }
          ]
        },
        "children": [
          {
            "id": 108,
            "type": "textnode",
            "value": "Here is an example of how you could use a variable to control the frequency of a sine wave:"
          }
        ]
      },
      {
        "component": "Chart",
        "idyllASTNode": {
          "id": 109,
          "type": "component",
          "name": "Chart",
          "properties": {
            "equation": {
              "type": "expression",
              "value": "(t) => Math.sin(t * frequency)"
            },
            "domain": {
              "type": "expression",
              "value": "[0, 2 * Math.PI]"
            },
            "samplePoints": {
              "type": "value",
              "value": 1000
            }
          },
          "children": []
        },
        "__expr__": {
          "equation": "(t) => Math.sin(t * frequency)",
          "domain": "[0, 2 * Math.PI]"
        },
        "equation": "(t) => Math.sin(t * frequency)",
        "domain": "[0, 2 * Math.PI]",
        "samplePoints": 1000,
        "children": []
      },
      {
        "component": "Range",
        "idyllASTNode": {
          "id": 110,
          "type": "component",
          "name": "Range",
          "properties": {
            "value": {
              "type": "variable",
              "value": "frequency"
            },
            "min": {
              "type": "value",
              "value": 0.5
            },
            "max": {
              "type": "expression",
              "value": "2 * Math.PI"
            },
            "step": {
              "type": "value",
              "value": 0.0001
            }
          },
          "children": []
        },
        "__vars__": {
          "value": "frequency"
        },
        "value": "frequency",
        "min": 0.5,
        "__expr__": {
          "max": "2 * Math.PI"
        },
        "max": "2 * Math.PI",
        "step": 0.0001,
        "children": []
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 111,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 112,
              "type": "component",
              "name": "Display",
              "properties": {
                "id": {
                  "type": "value",
                  "value": "lateVarDisplay"
                },
                "value": {
                  "type": "variable",
                  "value": "lateVar"
                }
              },
              "children": []
            },
            {
              "id": 113,
              "type": "textnode",
              "value": "\nLate Var Range:"
            }
          ]
        },
        "children": [
          {
            "component": "Display",
            "idyllASTNode": {
              "id": 112,
              "type": "component",
              "name": "Display",
              "properties": {
                "id": {
                  "type": "value",
                  "value": "lateVarDisplay"
                },
                "value": {
                  "type": "variable",
                  "value": "lateVar"
                }
              },
              "children": []
            },
            "id": "lateVarDisplay",
            "__vars__": {
              "value": "lateVar"
            },
            "value": "lateVar",
            "children": []
          },
          {
            "id": 113,
            "type": "textnode",
            "value": "\nLate Var Range:"
          }
        ]
      },
      {
        "component": "Range",
        "idyllASTNode": {
          "id": 114,
          "type": "component",
          "name": "Range",
          "properties": {
            "value": {
              "type": "variable",
              "value": "lateVar"
            },
            "min": {
              "type": "value",
              "value": 2
            },
            "max": {
              "type": "value",
              "value": 100
            }
          },
          "children": []
        },
        "__vars__": {
          "value": "lateVar"
        },
        "value": "lateVar",
        "min": 2,
        "max": 100,
        "children": []
      },
      {
        "component": "p",
        "idyllASTNode": {
          "id": 115,
          "type": "component",
          "name": "p",
          "children": [
            {
              "id": 116,
              "type": "textnode",
              "value": "Read more about Idyll at "
            },
            {
              "id": 117,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/"
                }
              },
              "children": [
                {
                  "id": 118,
                  "type": "textnode",
                  "value": "https://idyll-lang.github.io/"
                }
              ]
            },
            {
              "id": 119,
              "type": "textnode",
              "value": ", and come say “Hi!” in our "
            },
            {
              "id": 120,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://gitter.im/idyll-lang/Lobby"
                }
              },
              "children": [
                {
                  "id": 121,
                  "type": "textnode",
                  "value": "chatroom on gitter"
                }
              ]
            },
            {
              "id": 122,
              "type": "textnode",
              "value": "."
            }
          ]
        },
        "children": [
          {
            "id": 116,
            "type": "textnode",
            "value": "Read more about Idyll at "
          },
          {
            "component": "a",
            "idyllASTNode": {
              "id": 117,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://idyll-lang.github.io/"
                }
              },
              "children": [
                {
                  "id": 118,
                  "type": "textnode",
                  "value": "https://idyll-lang.github.io/"
                }
              ]
            },
            "href": "https://idyll-lang.github.io/",
            "children": [
              {
                "id": 118,
                "type": "textnode",
                "value": "https://idyll-lang.github.io/"
              }
            ]
          },
          {
            "id": 119,
            "type": "textnode",
            "value": ", and come say “Hi!” in our "
          },
          {
            "component": "a",
            "idyllASTNode": {
              "id": 120,
              "type": "component",
              "name": "a",
              "properties": {
                "href": {
                  "type": "value",
                  "value": "https://gitter.im/idyll-lang/Lobby"
                }
              },
              "children": [
                {
                  "id": 121,
                  "type": "textnode",
                  "value": "chatroom on gitter"
                }
              ]
            },
            "href": "https://gitter.im/idyll-lang/Lobby",
            "children": [
              {
                "id": 121,
                "type": "textnode",
                "value": "chatroom on gitter"
              }
            ]
          },
          {
            "id": 122,
            "type": "textnode",
            "value": "."
          }
        ]
      }
    ]
  }
]