A React-like user interface micro-library

Framework Size Comparison

Framework	Version	Minified Size (gzip)
Ember	2.3.0	112.9kb
Angular	1.5.0	53.17kb
Polymer	1.2.4	53.0kb
React	0.14.7	38.56kb
Web Components Polyfill	0.7.21	32.8kb
Vue	1.0.16	24.55kb
Riot	2.3.16	8.56kb

Custom tags • Concise syntax • Virtual DOM • Full stack

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.

Virtual DOM

• 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

• Create tags with CoffeeScript, Jade, LiveScript, Typescript, ES6 or any pre-processor you want.
• Integrate with NPM, CommonJS, AMD, Bower or Component
• Develop with Gulp, Grunt, Browserify, or Wintersmith plugins

CDN hosting

• jsDelivr
• cdnjs

Concise syntax

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

Demos

• Riot Examples - Community's Official
• Riot Todo MVC
• Hackernews reader
• Vuejs examples by Riotjs
• Flux-like ES6 Todo
• Timer
• Another flux demo comparable to React ones
• Various experiments
• Isomorphic application
• Isomorphic proof of concept
• flux-riot todo
• Another Riot Todo MVC
• Cheft isomorphic by express
• electron-riot - Riot in an electron application

Tutorials

• Building Apps with Riot, ES6 and Webpack
• Building Apps with Riot, Babel, RiotControl and Webpack
• Building tabs with Riot
• The "React tutorial" for Riot
• How to package "tag libraries" in Riot
• Another React tutorial with Riot
• Riot Custom Tag by Example
• Riot Compiler Explained
• Adding compiled Riot tags to your Gulp + Browserify build
• The anatomy of a tag - a primer tutorial
• Using TDD with Riot+mocha+chai

Video Tutorials

• Introduction
• Loops, Events and Callbacks
• Server Rendering with Node & Express

Libraries / Frameworks

• Flux- like event controller for Riot
• Riotux - Event Controller based on Namespaces and Stores
• flux-riot framework
• Cheftjs - chinese framework for Riot
• Veronica - flux adaption for Riot

Components

• Material UI
• RiotGear Components
• RiotGear Router
• Riot Bootstrap
• iToolkit
• Riot Routehandler-(Demo)
• Riot Grid - (Demo)
• ESLint Riot Plugin
• riot-animate

Resources

• Riot + AngularJS
• Module loader for WebPack
• Riot + Meteor
• Riot Snake Game
• Riot Tag Syntax Checker
• Riot 文档中译版 🇨🇳
• Riot + Wintersmith
• Riot precompiler plugin for lineman
• Riot Startkit - Flux inspired skeleton app + WebPack + PostCSS
• Yeoman generator - Generator riot mobile
• Yeoman generator - Generator riot element
• Riot for TypeScript
• Riot loader plugin for RequireJS
• Riot loader plugin for JSPM/SystemJS

Performance

• Riot vs React performance: (Riot version) vs (React version)

Miscellaneous

• Q&A with RiotJS author Tero Piirainen
• riot-detector (Chrome Extension)

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

• riot (Atom Package)
• language-riot-tag (Atom Package)
  • Based on Vue's official Sublime Text highlighter
  • Note: Designed for html, not jade.
• sublime-tag (Sublime Text)
• riot-tag (Visual Studio)

Credits

Riot is made with ❤️ 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
• Tero Piirainen

Buy us a coffee ☕

http://riotjs.com/