node package manager


Command line interface for idyll lang


Command line interface for idyll lang

What is Idyll?




npm install -g idyll


idyll input.idl --css input.css


Install the project generator and create a new Idyll project:

$ npm install -g yo generator-idyll
$ yo idyll

cd into the project folder and open index.idl.

The simplest thing that you can put in this file is just text, so try that. Inside of index.idl, write

hello world!

and run it with:

npm start

This should open your web browser to a page declaring its greetings to the world.


You'll probably want to style your page, so open styles.css and edit the styles.

The page should automatically reload.


You probably want more than just text! Try using one of the built-in components. Inside of your .idl file write:

[var name:"test" value:0 /]
Hello world.
[Range value:test min:0 max:10 /]

To see the rest of the available component, for now see

Custom Components

A simple custom component already exists inside of the components folder. This component can be invoked in your .idl file like:

[var name:"test" value:0 /]
Hello world.
[Range value:test min:0 max:10 /]
[CustomComponent value:test /]

To update a variable from within a component, you can call this.updateProps({ propname: val }) and idyll will automatically propegate the changes to that property back to any variables that were bound to it, e.g. in custom-component.js adding this.updateProps({value: newValue}) would update the value of the variable test and subsequently change the position of the range slider.