Riot.js — Simple and Elegant Component-Based UI Library

Introduction

Riot.js is a component-based UI library with a tiny footprint (around 6kB gzipped). It uses custom HTML tags that encapsulate template, logic, and styles in a single file, compiling them into efficient JavaScript. Riot embraces web standards and outputs native Custom Elements.

What Riot.js Does

• Defines reusable UI components using a simple single-file tag format
• Compiles custom tags to standard Web Components (Custom Elements v1)
• Provides reactive state management with a straightforward this.update() API
• Supports template expressions, conditionals, loops, and slots within tags
• Works standalone or alongside other frameworks via Web Components interop

Architecture Overview

Riot compiles .riot files into JavaScript modules at build time. Each component has a template (HTML with expressions), a script (lifecycle hooks and methods), and optional scoped styles. At runtime, components mount to DOM nodes and use a targeted DOM diffing algorithm for updates. State changes trigger re-renders only for the affected component subtree. Riot components register as native Custom Elements, enabling cross-framework usage.

Self-Hosting & Configuration

• Install with npm install riot and @riotjs/compiler for build-time compilation
• Use @riotjs/webpack-loader, @riotjs/rollup-plugin, or @riotjs/vite-plugin for bundler integration
• Mount components with riot.mount("my-counter") or the component's mount export
• Pre-compile tags for production to avoid shipping the compiler to the browser
• No global configuration needed; each component is self-contained

Key Features

• Single-file components combine HTML, JS, and scoped CSS in one .riot file
• Compiles to native Custom Elements for interop with any framework
• Template syntax uses plain JavaScript expressions instead of a custom DSL
• Lifecycle hooks (onBeforeMount, onMounted, onUpdated, onUnmounted) cover the full component lifecycle
• Slots and named slots support component composition patterns

Comparison with Similar Tools

• Vue — Much larger framework with router, state management ecosystem; Riot is minimal and focused
• Svelte — Compiler-based with no runtime; Riot has a small runtime but also uses compilation
• Lit — Also targets Web Components; Riot offers a richer single-file component format
• Alpine.js — Attribute-based enhancement; Riot uses custom tag syntax with full components
• Hyperapp — Purely functional VDOM; Riot uses mutable state with explicit update calls

FAQ

Q: Is Riot.js still maintained? A: Yes. Riot 9.x is actively developed with regular releases and a responsive maintainer community.

Q: Can Riot components be used inside React or Vue apps? A: Yes. Since Riot compiles to native Custom Elements, they work in any framework that supports standard HTML elements.

Q: Does Riot support server-side rendering? A: Yes. The @riotjs/ssr package renders Riot components to HTML strings on the server.

Q: How does Riot handle routing? A: The @riotjs/route package provides a lightweight client-side router designed for Riot apps.

Sources

• https://github.com/riot/riot
• https://riot.js.org