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.

Image
Action
Image
Boolean
Image
Button
Image
Dynamic
Image
Radio
Image
Range
Image
Select
Image
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.

Image
Aside
Image
Annotation
Image
Full Width
Image
Fixed
Image
Float
Image
Inline
Image
Scroller
Image
Stepper

Logic

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

Image
Conditional
Image
Loop
Image
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.

Image
Chart
Image
Cite
Image
Display
Image
Desmos
Image
Equation
Image
Gist
Image
Header
Image
Link
Image
Preview
Image
SVG
Image
Table
Image
Tweet
Image
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.

Image
Analytics
Image
Meta
Image
Preload

Continue to npm components.

Advertisement