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

Indrek Lasn
Aug 3, 2018 · 4 min read
Image for post
Image for post
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 very informative.

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

Image for post
Image for post
Traveling Salesman Algorithms

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

Image for post
Image for post
Traveling Salesman Algorithms

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


What is idyll?

Image for post
Image for post
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.

Image for post
Image for post
Idyll is a new markup language
Image for post
Image for post
https://idyll-lang.org/

At its core, Idyll is a markup language. Not just any markup language, Idyll lets you leverage a modular/component approach like any modern language. Idyll also lets you reuse third-party packages (npm) and can be combined optionally 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.

Image for post
Image for post
The Etymology of Trig Functions by Matthew Conlen

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

Image for post
Image for post
Idyll browser editor

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

Image for post
Image for post
basic markup for applying to format

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

Let’s spin up a pie chart.

Image for post
Image for post
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 properties you can pass to the chart component are the following.

Image for post
Image for post

Equations

Idyll uses KaTeX to typeset mathematical equations.

Image for post
Image for post

Fixed

Image for post
Image for post

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

List of all built-in components.

Image for post
Image for post
https://idyll-lang.org/docs/components

The Startup

Medium's largest active publication, followed by +687K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Take a look

Create a free Medium account to get Top Stories in your inbox.

Indrek Lasn

Written by

Fullstack web engineer, startup founder, I help teams building new products, connect with me on Twitter @ https://twitter.com/lasnindrek

The Startup

Medium's largest active publication, followed by +687K people. Follow to join our community.

Indrek Lasn

Written by

Fullstack web engineer, startup founder, I help teams building new products, connect with me on Twitter @ https://twitter.com/lasnindrek

The Startup

Medium's largest active publication, followed by +687K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store