Idyll-lang: Make your app stand out with data-driven stories

Idyll-lang: Make your app stand out with interactive data-driven stories

Idyll is an open-source markup language and web runtime

Do you know what’s hot right now?

Explorable explanations.

Explorable explanations are data-driven documents which have interactivity. You have seen many EE’s on the web, everyone loves them!

Take this carefully crafted graph for instance.

Explorable explanations example — Where boys end up after growing up with wealth

It’s a well designed graph with animations and it’s well informative.

Explorable explanations make things fun — The way we receive the information is compelling.

Traveling Salesman Algorithms

We crave for new information, especially with great delivery and aesthetics.

Traveling Salesman Algorithms

Here’s a great article going in more depth on being an active reader, reactive documents and contextual information .

Explorable Explanations

Explorable Explanations is my umbrella project for ideas that enable and encourage truly active reading. The goal is to… worrydream.com

What is idyll?

https://github.com/idyll-lang/idyll

Idyll is an open-source markup language and toolkit for producing interactive web pages. You give Idyll a markup file, and it compiles that file to a full bundle of HTML, JavaScript, and CSS that can run in anyone’s web browser.

Idyll is a new markup language

https://idyll-lang.org/

At it’s core, Idyll is a markup language. Not just any markup language, Idyll let’s you leverage modular/component approach like any modern language. Idyll also lets you reuse third party packages (npm) and combined (optional) with React.

The traditional end-to-end procedure for Idyll;

You initialize a standalone project per document.
You write code for the formula, graph, chart, etc.
Once finished, you publish/deploy the document and embed it to your website/SPA.

Idyll is great at creating charts with 5 lines of code.

The Etymology of Trig Functions by Matthew Conlen

Look how smooth that rendering is. Let’s give Idyll a go, here’s the browser editor.

Idyll browser editor

Write some basic markup as usual. At it’s surface it looks like regular markup.

basic markup for applying formatting

Here’s where it gets cool. We can use components, variables and math equations inside our markup.

Let’s spin up a pie chart.

Pie chart with Idyll — powered by victory charts

Notice the logic and the components are inside the bracket syntax []

Sweet! Idyll has built-in components which we can reuse. In case you’re curious, the props you can pass to the chart component are the following.

Equations

Idyll uses KaTeX to typeset mathematical equations.

Fixed

Content inside of a fixed component will be locked in place, even when the rest of the document scrolls. The scroll example uses the fixed component to keep the dynamic chart in place: