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

> Riot.js is a lightweight UI library that brings custom components to all browsers with a minimal footprint, using an intuitive tag-based syntax that compiles to standard Web Components.

## Install

Save in your project root:

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

## Quick Use
```bash
npm install riot @riotjs/compiler
```
```html
<!-- my-counter.riot -->
<my-counter>
  <button onclick={increment}>{state.count}</button>
  <script>
    export default {
      state: { count: 0 },
      increment() { this.update({ count: this.state.count + 1 }) }
    }
  </script>
</my-counter>
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-ecb288d8
Author: AI Open Source