{
  "id": 0,
  "type": "component",
  "name": "div",
  "children": [
    {
      "id": 2,
      "type": "var",
      "properties": {
        "name": {
          "type": "value",
          "value": "x"
        },
        "value": {
          "type": "value",
          "value": 2
        }
      }
    },
    {
      "id": 3,
      "type": "var",
      "properties": {
        "name": {
          "type": "value",
          "value": "objectVar"
        },
        "value": {
          "type": "expression",
          "value": " { an: \"object\" } "
        }
      }
    },
    {
      "id": 4,
      "type": "var",
      "properties": {
        "name": {
          "type": "value",
          "value": "arrayVar"
        },
        "value": {
          "type": "expression",
          "value": " [ \"array\" ] "
        }
      }
    },
    {
      "id": 5,
      "type": "var",
      "properties": {
        "name": {
          "type": "value",
          "value": "frequency"
        },
        "value": {
          "type": "value",
          "value": 1
        }
      }
    },
    {
      "id": 6,
      "type": "var",
      "properties": {
        "name": {
          "type": "value",
          "value": "lateVar"
        },
        "value": {
          "type": "value",
          "value": 50
        }
      }
    },
    {
      "id": 7,
      "type": "data",
      "properties": {
        "name": {
          "type": "value",
          "value": "myData"
        },
        "source": {
          "type": "value",
          "value": "myData.csv"
        }
      }
    },
    {
      "id": 8,
      "type": "data",
      "properties": {
        "name": {
          "type": "value",
          "value": "myAsyncJSONData"
        },
        "async": {
          "type": "value",
          "value": true
        },
        "source": {
          "type": "value",
          "value": "https://url.com/myData"
        },
        "initialValue": {
          "type": "expression",
          "value": "[]"
        }
      }
    },
    {
      "id": 9,
      "type": "data",
      "properties": {
        "name": {
          "type": "value",
          "value": "myAsyncCSVData"
        },
        "async": {
          "type": "value",
          "value": true
        },
        "source": {
          "type": "value",
          "value": "https://url.com/myData.csv"
        },
        "initialValue": {
          "type": "expression",
          "value": "[]"
        }
      }
    },
    {
      "id": 10,
      "type": "derived",
      "properties": {
        "name": {
          "type": "value",
          "value": "xSquared"
        },
        "value": {
          "type": "expression",
          "value": "x * x "
        }
      }
    },
    {
      "id": 11,
      "type": "derived",
      "properties": {
        "name": {
          "type": "value",
          "value": "xCubed"
        },
        "value": {
          "type": "expression",
          "value": "x * xSquared "
        }
      }
    },
    {
      "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": "."
            }
          ]
        }
      ]
    }
  ]
}