Post 1

Introduction

This is an Idyll post. It is generated via the file index.idyll. To compile this post using idyll, run the command idyll inside of this directory.

Idyll posts are designed to support interaction and data-driven graphics.

Configuration can be done via the idyll field in package.json.

Markup

Idyll is based on Markdown.

You can use familiar syntax to create bold (**bold** ) and italic (`*italic* ) styles,

• lists
• of
• items,

* lists
* of
* items,

1. and numbered
2. lists
3. of items,

1. and numbered
2. lists
3. of items,

in addition to hyperlinks and images:

![quill](static/images/quill.svg)

Components

Components can be embedded using a bracket syntax:

[Range /]

and can contain nested content:

[Equation]e = mc^{2}[/Equation]

Components accept properties:

[Range value:x min:0 max:1 /]

that can be bound to variables to achieve interactivity (more in next section).

A variety of components are included by default. See all the available components. You can also use any html tag, for example: [div] A div! [/div].

To create your own, add it to the components/ folder. There are examples of how to use Idyll with React and D3 based components already included.

Interactivity

Here is how you can instantiate a variable and bind it to a component:

[var name:"exampleVar" value:5 /]

[Range min:0 max:10 value:exampleVar /]
[Display value:exampleVar /]

Learn More

To learn more see the documentation at https://idyll-lang.org/docs/, join our chatroom, or see the project on GitHub.