idyll-langidyll
DocsTutorialsGalleryEditor
menu

Overview

  • Introduction
  • Getting started
  • Markup syntax
  • HTML tags
  • Options and styles
  • Plugin system
  • Multipage template

Interactivity

  • Built-in components
  • Using components from npm
  • Make your own component
  • Scrolling and Refs

Publishing

  • Deploying to the web
  • Embedding Idyll

Useful Links

  • Github
  • Chat
  • Twitter
  • Support Us

Built-In Components

Idyll ships with a handful of components that handle common tasks. They are broken into five categories: input, layout, logic, presentation, and helpers.

Input

The components are used to accept reader input and update variables in response.

Action
Boolean
Button
Dynamic
Radio
Range
Select
Text Input

Layout

These components help manage page layout, for example putting text in the Aside component will render it in the article margin instead of inline with the rest of your text.

Aside
Annotation
Full Width
Fixed
Float
Inline
Scroller
Stepper

Logic

These components help add logic like conditionally showing components or looping over arrays.

Conditional
Loop
Switch

Presentation

These components render something to the screen, for example the Chart component takes data as input and can display several types of charts.

Chart
Cite
Display
Desmos
Equation
Gist
Header
Link
Preview
SVG
Table
Tweet
Youtube

Helpers

These components don't affect the page content, but help with common tasks. The Analytics component makes it easy to add Google Analytics to your page.

Analytics
Meta
Preload

Continue to npm components.