--- layout: home title: Riot.js — Simple and elegant component-based UI library description: Riot.js lets you build user interfaces with custom tags using simple and enjoyable syntax. --- ## Why do we need a new UI library? The frontend space is indeed crowded, but we honestly feel the solution is still "out there". We believe Riot.js offers the right balance for solving the great puzzle. So — here's why we need one: ### 1. Custom elements Riot.js brings custom elements to all modern browsers without the use of any polyfill! ``` html

{ props.title }

{ item }

``` A custom element glues relevant HTML and JavaScript together forming a reusable component. It is designed to offer you everything you wished native the web components API looked like. #### Human-readable Custom tags let you build complex views with HTML. Your application might look something like this: ``` html

Riot.js application

``` HTML syntax is the *de facto* language of the web and it's designed for building user interfaces. The syntax is explicit, nesting is inherent to the language, and attributes offer a clean way to provide options for custom tags. Riot.js tags are [compiled]({{ '/compiler/' | prepend:site.baseurl }}) to pure JavaScript before browsers can execute them. #### Performant and predictable - Absolutely the smallest possible amount of DOM updates and reflows. - Fast expressions bindings instead of virtual DOM memory performance issues and drawbacks. - One way data flow: updates and unmounts are propagated downwards from parent to children - Expressions are pre-compiled and cached for high performance - Lifecycle events for more control - Server-side rendering of custom tags for universal (isomorphic) applications #### Close to standards - Future-proof thanks to the JavaScript module syntax. - The rendered DOM can be freely manipulated with other tools - Web Components like API - No need for external polyfills or additional libraries - No proprietary event system - No extra HTML root elements, data-attributes or fancy custom attributes. #### Tooling friendly - Create components with TypeScript, Rust, JavaScript Next or [any pre-processor](https://riot.js.org/compiler/#pre-processors) you want. - Build with [@riotjs/cli](https://github.com/riot/cli), [webpack](https://github.com/riot/webpack-loader), [Rollup](https://github.com/riot/rollup-plugin-riot), [Parcel](https://github.com/riot/parcel-plugin-riot), [Browserify](https://github.com/riot/riotify). - Test with whatever you like, you can [load your Riot tags directly in node](https://github.com/riot/ssr#render---to-render-only-markup) ## 2. Simple and minimalistic Minimalism sets Riot.js apart from others: ### 1. Enjoyable syntax One of the design goals was to introduce a powerful tag syntax with as little boilerplate as possible: - No extra brain load for attributes like `className`, `htmlFor`... - Shortcut spread operator for multiple attributes: `

` - Expressions Interpolation: `Add #{ items.length + 1 }` or `class="item { activeClass }"` - `export default` statement to define the tag's public interfaces - No side effects due to asynchronous rendering or `Proxy` objects - Functional API over OOP class-based syntax - Automatic CSS styling via `