riot

Simple and elegant component-based UI library

The frontend space is indeed crowded, but we honestly feel the solution is still “out there”. We believe Riot offers the right balance for solving the great puzzle. While React seems to do it, they have serious weak points that Riot will solve.

View demo Download Source

Framework Size Comparison

Framework Version Minified Size (gzip)
Ember 2.18.2 121.84kb
@angular/core + Polyfills 5.2.9 91.06kb
Polymer + Web Components Polyfill Lite 1.8.0 66.3kb
React + Map and Set Polyfills 16.1.0 43.25kb
Web Components Polyfill 0.7.24 33.68kb
Vue 2.5.16 31.64kb
Riot 3.9.2 10.71kb
Inferno 5.0.1 8.01kb
Preact 8.2.7 3.45kb

The above comparison includes polyfills to support old browsers like IE9 that in Riot.js is supported by default

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

<timer>

  <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() {
    clearInterval(timer)
  })

</timer>

Open this example on Plunker

Mounting

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

Nesting

Custom tags lets you build complex views with HTML.

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

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 any frontend framework.

GitHub