Riot.js

Riot.js is a small, open-source, component-based JavaScript UI library that brings custom components to all modern browsers using a concise HTML-like tag syntax.

What is Riot.js?

Riot.js is a client-side UI library maintained by Gianluca Guarini and contributors, released under the MIT license. It takes custom component definitions written as HTML-like "tags" — each with a script block exporting the component's state and lifecycle methods — and mounts them into the DOM, producing dynamic, updating views. It runs in all modern browsers, and its modular ecosystem adds server-side rendering, hydration, routing, and lazy loading for Node.js environments.

What makes Riot.js stand out?

• Tiny runtime — The library emphasizes a minimal size; the README highlights a "tiny size" badge and aims to be the smallest possible library for component-based UIs.
• No virtual DOM — Riot uses pre-compiled, cached expressions bound directly to the DOM, avoiding virtual DOM memory overhead and reflow costs.
• One-way data flow — Updates and unmounts propagate downward from parent to child components, making state changes predictable.
• Standards-friendly — It has no proprietary event system, no extra root elements or data- attributes, and the rendered DOM can be manipulated with any other tool.
• Pre-processor support — Components can be authored in CoffeeScript, TypeScript, ES6, or any pre-processor configured through the compiler.
• Modular ecosystem — Official packages include @riotjs/cli for local compilation, @riotjs/ssr for server rendering, @riotjs/hydrate for SPAs, @riotjs/route for routing, and @riotjs/lazy for lazy component loading.
• Build-tool integrations — Compiles via webpack, Rollup, Parcel, Browserify, or the CLI, and tags can be loaded directly in Node for testing.
• Lifecycle hooks — Provides onBeforeMount, onMounted, and onUnmounted (among others) so you control component setup and teardown.

Who should use Riot.js?

• Frontend developers who want a lighter alternative to larger frameworks like React or Vue while still getting reusable custom components.
• Teams building design systems or widget libraries that need small, self-contained components that nest naturally in HTML and play well with other frameworks.
• Developers requiring server-side rendering can use @riotjs/ssr to render tags to markup in Node, then hydrate them on the client.
• Developers using pre-processors or TypeScript can author components in their preferred language thanks to Riot's compiler pipeline.

What can you do with Riot.js?

• Create reusable custom components — Define a tag like a timer with state and lifecycle, then mount it anywhere with riot.mount.
• Build single-page applications — Combine @riotjs/route for isomorphic routing and @riotjs/hydrate to add interactivity to server-rendered pages.
• Server-side render components — Use @riotjs/ssr to render tags to plain markup in Node, ideal for SEO or static generation.
• Integrate into any build setup — Compile tags with webpack, Rollup, Parcel, or Browserify, or load them directly in Node for unit testing.

How does Riot.js work?

You define a component as an HTML-like tag with a script block that exports the component's state, methods, and lifecycle hooks. Then you call riot.mount with a selector and optional props to render it. Updates happen by calling this.update with new state, and the pre-compiled expression bindings update only the changed DOM parts. Tags nest like standard HTML elements, so you compose views by placing tags inside other tags.

Alternatives

• Svelte — A compiler-based UI framework that shifts work to build time rather than runtime, often producing smaller bundles.
• Vue — A full-featured progressive framework with a larger ecosystem, template syntax, and virtual DOM implementation.
• Preact — A small React alternative that keeps the React API but is lighter weight.

FAQ

Is Riot.js free?

Yes, Riot.js is released under the MIT license, so it's free to use commercially and personally without restrictions.

Does Riot.js use a virtual DOM?

No, Riot uses pre-compiled expression bindings that update the DOM directly, which avoids virtual DOM memory overhead and can be more performant for frequent updates.

Can I use Riot.js with other frontend frameworks?

Yes, Riot is designed to play well with any frontend framework. It adds no proprietary event system or special DOM attributes, so you can embed Riot components inside React, Vue, or plain HTML pages.

How do I render Riot components on the server?

Use the official @riotjs/ssr package to render tags to markup in Node.js, and @riotjs/hydrate to make them interactive on the client for SPA-like experiences.