# riot/riot

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/riot-riot).**

14,906 stars · 963 forks · JavaScript · other

## Links

- GitHub: https://github.com/riot/riot
- Homepage: https://riot.js.org
- awesome-repositories: https://awesome-repositories.com/repository/riot-riot.md

## Topics

`client-side` `customelement` `customelements` `customtags` `elegant` `framework` `javascript` `lite` `minimal` `simple` `view` `webcomponents`

## Description

Riot is a component-based library for building user interfaces through modular, single-file components. It functions as a framework for creating reusable elements that combine markup, logic, and scoped styles, which are then compiled into standard JavaScript functions for browser execution.

The library distinguishes itself by utilizing direct rendering, which updates the document object model by tracking state changes without the overhead of a virtual representation. It supports server-side rendering and hydration to improve initial page load performance and search engine indexing. Developers can extend the core functionality through a global plugin system and integrate custom preprocessors into the build pipeline to support alternative syntax or languages.

The project provides a comprehensive set of tools for managing component lifecycles, state, and user interactions. It includes capabilities for conditional rendering, dynamic collection generation, and scoped style encapsulation to prevent style leakage. The system also offers command-line tools to bootstrap project structures and bundle assets for deployment.

## Tags

### User Interface & Experience

- [Component-Based UI Libraries](https://awesome-repositories.com/f/user-interface-experience/component-libraries/component-based-ui-libraries.md) — A library for building user interfaces from modular single-file components that combine markup, logic, and scoped styles.
- [Modular UI Components](https://awesome-repositories.com/f/user-interface-experience/modular-ui-components.md) — Defines modular UI components as single-file units for consistent reuse and composition. ([source](https://riot.js.org/documentation))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Facilitates building reusable UI components that encapsulate markup, logic, and styles. ([source](https://riot.js.org/documentation))
- [Component Data Passing](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing.md) — Inject external data or objects into components during initialization to configure their initial behavior and appearance based on the needs of the parent application. ([source](https://riot.js.org/documentation))
- [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-hooks.md) — Execute custom logic at specific stages of a component existence, such as when it is first added to the page or after it has been updated. ([source](https://riot.js.org/documentation))
- [Expression Rendering](https://awesome-repositories.com/f/user-interface-experience/expression-rendering.md) — Parses and synchronizes dynamic JavaScript expressions within markup templates to update element attributes and text content.
- [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-lifecycle-hooks.md) — Provides lifecycle hooks to execute custom logic during component initialization, updates, and cleanup.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Applies scoped styles to components to ensure visual isolation and prevent style leakage. ([source](https://riot.js.org/documentation))
- [CSS Scoping Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/build-time-style-processing/css-scoping-engines.md) — Encapsulates component styles by automatically prefixing selectors to prevent leakage across the application.
- [Application Architectures](https://awesome-repositories.com/f/user-interface-experience/application-architectures.md) — Managing complex application state and user interactions to create responsive interfaces that update automatically based on data changes.
- [Interaction and Event Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling.md) — Execute custom logic when events occur by binding functions to element attributes and accessing component state to update the interface in response to user actions. ([source](https://riot.js.org/documentation))
- [HTML Element Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/html-element-wrappers.md) — Connects custom component behavior to standard HTML elements to maintain compatibility with existing structures. ([source](https://riot.js.org/documentation))
- [Pure Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/composition-rendering-patterns/component-patterns/pure-components.md) — Allows bypassing default rendering logic to manually manage component output for performance optimization. ([source](https://riot.js.org/documentation))
- [State Bindings](https://awesome-repositories.com/f/user-interface-experience/input-field-enhancements/state-bindings.md) — Update form elements like text fields and dropdowns by binding them to component state while maintaining explicit control over how user input is processed. ([source](https://riot.js.org/documentation))
- [Conditional Rendering](https://awesome-repositories.com/f/user-interface-experience/ui-element-selectors/conditional-rendering.md) — Mount or remove elements from the page based on the truthiness of a provided expression to show or hide content dynamically during user interaction. ([source](https://riot.js.org/documentation))

### Web Development

- [Single File Components](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/single-file-components.md) — Compiles single-file components containing markup, logic, and styles into efficient JavaScript functions.
- [Single File Components](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/single-file-components/single-file-components.md) — Building reusable and encapsulated user interface elements by combining markup, logic, and scoped styles into single-file components.
- [Web-Standard Frameworks](https://awesome-repositories.com/f/web-development/web-standard-frameworks.md) — A framework for creating reusable web components that compile into standard code for efficient browser rendering.
- [Direct DOM Manipulation](https://awesome-repositories.com/f/web-development/direct-dom-manipulation.md) — Updates the DOM directly by tracking state changes without the overhead of a virtual representation.
- [Component State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/component-state-management.md) — Maintain internal mutable data for components and trigger automatic interface updates whenever that data changes to keep the display in sync with the application logic. ([source](https://riot.js.org/documentation))
- [Server-Side Hydration Utilities](https://awesome-repositories.com/f/web-development/server-side-hydration-utilities.md) — Supports server-side rendering and client-side hydration to optimize initial page loads and search engine indexing.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Generate component markup on the server to improve initial page load speeds and ensure search engines can properly index the content of your application. ([source](https://riot.js.org/documentation))
- [Dynamic Content Insertion](https://awesome-repositories.com/f/web-development/content-insertion-utilities/dynamic-content-insertion.md) — Embeds dynamic expressions directly into markup to bind element attributes and content to component data. ([source](https://riot.js.org/documentation))
- [Dynamic List Rendering](https://awesome-repositories.com/f/web-development/dynamic-list-rendering.md) — Generates repeated UI elements from data collections with automatic view updates. ([source](https://riot.js.org/documentation))
- [Asset Optimization Pipelines](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/asset-lifecycle-orchestration/asset-pipelines/asset-optimization-pipelines.md) — Bundles component files into optimized assets for browser deployment using standard build tools. ([source](https://riot.js.org/documentation))
- [DOM Element Selectors](https://awesome-repositories.com/f/web-development/dom-element-selectors.md) — Select and interact with specific elements within the rendered component structure using reference attributes to perform manual operations on the underlying document object model. ([source](https://riot.js.org/documentation))

### Development Tools & Productivity

- [Frontend Build Tools](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-automation-systems/frontend-build-tools.md) — A system for transforming and bundling component files into optimized assets for deployment in modern web browsers.

### Software Engineering & Architecture

- [Composable Architectures](https://awesome-repositories.com/f/software-engineering-architecture/composable-architectures.md) — Enables the composition of complex user interfaces through nested, reusable single-file components. ([source](https://riot.js.org/documentation))
- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Supports a global plugin system for injecting custom functionality into the component lifecycle and internal API.
- [Plugin Extenders](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/developer-authoring-interfaces/custom-module-implementations/module-functionality-extenders/plugin-extenders.md) — Allows enhancing base component functionality by registering global plugins. ([source](https://riot.js.org/documentation))