riot 0,14,37,0,8,17,0,28 codeclimate eslint travis-ci Bower npm

Simple and elegant component-based UI library

Riot logo

Simple and elegant component-based UI library

Build Status Riot Forum Join the chat at Join the chat (ja) at OpenCollective Backers OpenCollective Sponsors

NPM version NPM downloads MIT License Coverage Status Code Quality

Sauce Test Status

Framework Size Comparison

Framework Version Minified Size (gzip)
Angular 4.1.2 237.41kb
Ember 2.13.0 129.93kb
Polymer + Web Components Polyfill Lite 1.8.0 66.3kb
React 15.5.4 46.45kb
Web Components Polyfill 0.7.24 33.68kb
Vue 2.3.3 28.85kb
Riot 3.5.1 10.02kb
Inferno 3.2.0 9.06kb
Preact 8.1.0 3.33kb

Browsers support

Riot is supported by all modern browsers and it does not require any additional polyfill

  • IE 9+
  • Edge
  • Chrome
  • Safari 7+
  • Firefox
  • Safari iOS
  • Android

Custom tags • Concise syntax • Simple API • Tiny Size

Riot brings custom tags to all modern browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

Tag definition


  <p>Seconds Elapsed: { time }</p>

  this.time = opts.start || 0

  tick() {
    this.update({ time: ++this.time })

  var timer = setInterval(this.tick, 1000)

  this.on('unmount', function() {


Open this example on Plunker


riot.mount('timer', { start: 0 })


Custom tags lets you build complex views with HTML.

  <timer start="0"></timer>
  <timer start="10"></timer>
  <timer start="20"></timer>

HTML syntax is the de facto language on 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.

Expressions Bindings

  • Absolutely the smallest possible amount of DOM updates and reflows.
  • 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.

Close to standards

  • No proprietary event system.
  • Event normalization.
  • The rendered DOM can be freely manipulated with other tools.
  • No extra HTML root elements or data- attributes.
  • Plays well with jQuery.

Use your dearest language and tools

Note: * officially maintained

CDN hosting

Concise syntax

  • Power shortcuts: class={ enabled: is_enabled, hidden: hasErrors() }.
  • No extra brain load such as render, state, or constructor.
  • Interpolation: Add #{ items.length + 1 } or class="item { selected: flag }"
  • Compact ES6 method syntax.



Video Tutorials

Libraries / Frameworks





Editors / Editor Plugins (Syntax highlighting, autcompletion, etc...)

How to contribute

If you are reading this it's already a good sign and we are thankful for it! We try our best working as much as we could on riot but your help is always appreciated.

If you want to contribute to riot helping us maintaining the project please check first the list of our open issues to understand whether there is a task where you could help.

Riot is mainly developed on UNIX systems so you will be able to run all the commands necessary to build and test the library using our Makefile. If you are on a Microsoft machine it could be harder to set up you development environment properly.

Following the steps below you should be able to properly submit your patch to the project

1) Clone the repo and browse to the riot folder

$ git clone [email protected]:riot/riot.git && cd riot

2) Set up your git branch

$ git checkout -b feature/my-awesome-patch

3) Install the npm dependencies

$ npm i

4) Build and test riot using the Makefile

# To build and test riot
$ make riot

# To build without testing
$ make raw

# To build anytime you change a src file
$ make watch

# To bench riot ( it requires ctrl+c to exit )
$ make perf

5) Pull request only against the dev branch making sure you have read our pull request template

6) Be patient


Riot is made with :heart: by many smart people from all over the world. Thanks to all the contributors
It's actively maintained by:

Richard Bondi

Gianluca Guarini

Tsutomu Kawamura

Alberto Martínez

Grant Marvin

Tero Piirainen

Official Website


Support us with a monthly donation and help us continue our activities. Become a backer



Become a sponsor to get your logo on our README. Become a sponsor


Related Repositories



Riot Games API Java Library ...



gulp plugin for riot ...



Animate Riot 2 ...



riot.js module for angular ...



An angular-ui style minimalist route handler for riot.js ...

Top Contributors

GianlucaGuarini tipiirai aurri aMarCruz cognitom rsbondi nippur72 3den ashleybrener marciojcoelho speier pakastin Avnerus antonheryanto gregorypratt andynemzek a-moses shime crisward andyvanee txchen AndreasHeintze r4j4h emehrkay qrb wellguimaraes gdub22 5angel hemanth mike-ward


package version
riot-cli ^3.0.2
riot-compiler ^3.2.4
riot-observable ^3.0.0
riot-tmpl ^3.0.8
simple-dom 0.3.2
simple-html-tokenizer ^0.4.1
dev benchmark ^2.1.4
chai ^4.0.2
cheerio ^1.0.0-rc.1
chokidar-cli ^1.2.0
coveralls ^2.13.1
eslint ^4.0.0
eslint-config-riot ^1.0.0
glob ^7.1.2
istanbul ^0.4.5
jsdom ^11.0.0
karma ^1.7.0
karma-chrome-launcher ^2.2.0
karma-coverage ^1.1.1
karma-mocha ^1.3.0
karma-phantomjs-launcher ^1.0.4
karma-rollup-preprocessor ^4.0.0
karma-sauce-launcher ^1.1.0
mocha ^3.4.2
phantomjs-prebuilt ^2.1.14
rollup ^0.43.0
rollup-plugin-alias 1.3.1
rollup-plugin-buble ^0.15.0
rollup-plugin-commonjs ^8.0.2
rollup-plugin-node-resolve ^3.0.0
rollup-plugin-riot ^1.1.0
sinon ^2.3.5
sinon-chai ^2.11.0
uglify-js ^3.0.18


-   v3.0.0-alpha.10 zip tar
-   v3.0.0-alpha.9 zip tar
-   v3.0.0-alpha.8 zip tar
-   v3.0.0-alpha.7 zip tar
-   v3.0.0-alpha.5 zip tar
-   v3.0.0-alpha.4 zip tar
-   v3.0.0-alpha.3 zip tar
-   v3.0.0-alpha.2 zip tar
-   v3.0.0-alpha.1 zip tar
-   v2.6.2 zip tar
-   v2.6.1 zip tar
-   v2.6.0 zip tar
-   v2.5.0 zip tar
-   v2.4.1 zip tar
-   v2.4.0 zip tar
-   v2.3.18 zip tar
-   v2.3.17 zip tar
-   v2.3.16 zip tar
-   v2.3.15 zip tar
-   v2.3.13 zip tar
-   v2.3.12 zip tar
-   v2.3.11 zip tar
-   v2.3.1 zip tar
-   v2.3.0 zip tar
-   v2.3.0-beta zip tar
-   v2.2.4 zip tar
-   v2.2.3 zip tar
-   v2.2.2 zip tar
-   v2.2.2-beta zip tar
-   v2.2.1 zip tar