Learn RIOT-JS with Real Code Examples

Riot.js uses a virtual DOM to efficiently update the UI.

Components encapsulate markup, logic, and styles.

It offers reactive state and event handling for interactive apps.

riot() / <component> tags - define custom components

Virtual DOM diffing and patching

Reactive observable state

Event binding via on() or declarative attributes

Lifecycle methods: onBeforeMount, onMounted, onUpdated, onUnmounted

Components encapsulate markup, logic, and styles

riot() or <tag> syntax defines components

Mounting attaches components to DOM elements

Reactive state updates UI automatically

Lifecycle hooks manage initialization and cleanup

components/ - Riot component files

index.js - entry point & mounting

assets/ - CSS, JS, and static files

services/ - API and utilities

routes/ - optional client-side routing setup

Define a Riot component with <tag> or riot()

Use expressions and bindings for reactive state

Mount component with `riot.mount(domNode, 'component')`

Listen for events using on() or HTML directives

Update state reactively to redraw UI

Beginner: simple UI widgets

Intermediate: multi-component pages

Advanced: SPA with dynamic routing

Expert: large modular component libraries

Community: integrating Riot with other frameworks

Lighter than React and Angular

Simpler than Vue for small SPAs

Scoped components vs global CSS

Reactive like Vue, but minimal API

Good for modular but small-to-medium apps

2014 – Initial release by Muut

2015–2017 – Early adoption and minor improvements

2018 – Single-file component support

2020 – Modern ES module support

2025 – Ongoing maintenance and modern tooling

Component: Encapsulated UI element with logic and styles

Virtual DOM: Lightweight representation of UI

Reactive state: State that updates UI automatically

Lifecycle hooks: Methods for component initialization and cleanup

Mounting: Attaching a component to the DOM