If you just want to quickly try out Idyll, we offer an online editor where you can play around and try out the language.
To install and use Idyll locally, install it using
npm. If you don't have
npm installed, first install it by following these instructions.
$ npm install -g idyll
Note that depending on how
npm is installed, you may have to run the above command prefixed with
sudo. Once the installation has finished, the
idyll command will be available in your shell. To compile a file run
$ idyll <input-file> --watch, this will compile and open the resulting webpage in your browser.
Creating a project
Idyll provides a built-in project template to help you get started. To use the generator run
$ idyll create
and follow the prompts. The generator will produce a structure that looks like this:
$ tree -I node_modules . ├── components/ ├── data/ ├── static/ ├── index.idyll ├── package.json └── styles.css
The files do the following:
index.idyll- The main Idyll file, write your text in here.
styles.css- By putting CSS in here you can override the default styles.
components/- The folder for custom components. Any component defined in this folder can be invoked in the .idl file.
data/- If you want to include a dataset in your project, put it in here.
static/- A folder for static file such as images.
package.json- This file contains all the metadata for your project.
After the project has been created, navigate to the root of the new folder, and run
idyll. Idyll will compile your project and open it in your web browser. Every time you save the
index.idyll file, the system will automatically recompile everything and update the page in the browser.
components/default/ folder contains the default components that Idyll provides. If you need to directly update one of these components or their styles, feel free - Idyll is built to be customized.
Continue to the next section to learn how to use Idyll's syntax.