Idyll starts with the same principles as markdown, and uses a lot of the same syntax. If you want text to appear in your output, just start writing text, save the mucking about with div’s, containers, and p tags for a different time. Markup should be written to be read by humans, not just computers. For a complete listing of markdown syntax that can be used within Idyll documents see the “Repertoire” example, and the markup used to create it.
Beyond Static Text
[ComponentName property:variableValue onEvent:`variableValue = 5` /]
Each tag corresponds to a React component, which receives the provided properties. Properties can be reactive variables or expressions, Idyll handles the logic to watch for variable updates and re-render components as needed.
Idyll includes a number of useful components by default, for example here is a chart component, plotting a sine wave.
[Chart equation:` (t) => Math.sin(t)` domain:`[0, 2 * Math.PI]` samplePoints:1000 /]
Currently its static, but variables can be used to parameterize the output, allowing the chart to dynamically update. For example, we can give it a variable domain, and a variable function to plot.
[var name:"func" value:`Math.sin` /] [var name:"domainStart" value:0 /] [var name:"domainEnd" value:`2 * Math.PI` /] [Chart equation:` (t) => func(t)` domain:`[domainStart, domainEnd]` samplePoints:1000 /]
These variables can be updated based on user actions, for example they can be attached to a button click:
[Chart ... /] [Button onClick:`func = Math.sin`]sin[/Button] [Button onClick:`func = Math.cos`]cos[/Button]
or bound to the value of standard input widgets:
[Chart ... /] #### Update Domain Start: [Range value:domainStart min:`-4 * Math.PI` max:0 step:0.01 /] End: [Range value:domainEnd min:0 max:`4 * Math.PI` step:0.01 /]
Write your own equation:
[var name:"funcString" value:`"(x) => x * Math.sin(10 / (x || 1))"` /] [derived name:"funcFromString" value:`eval(funcString)` /] [TextInput value:funcString /] [Chart equation:` (t) => funcFromString(t) ` domain:`[domainStart, domainEnd]` samplePoints:1000 /]
If you like what Idyll is doing, consider buying a sticker to help sustain the project, or select from one of the other one-time and recurring donation options on Open Collective.
Idyll is supported by the Interactive Data Lab at the University of Washington, and by Rhizome and The Eutopia Foundation.
Continue to the next section to start using Idyll.