A React-like user interface micro-library

Framework Size Comparison

Framework	Version	Minified Size (gzip)
Angular2	2.0.0-beta.17	125.29kb
Ember	2.6.1	112.94kb
Angular	1.5.7	56.02kb
Polymer + Web Components Polyfill Lite	1.4.0	54.48kb
React	15.2.0	45.49kb
Web Components Polyfill	0.7.22	33.66kb
Vue	1.0.26	26.66kb
Riot	2.5.0	9.25kb

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
• An express, riot, jade, webpack simple boilerplate
• Riot.js vs React.js comparison of a simple comment box

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
• The Basics - from ground up to connected tag-networks

Video Tutorials

• Introduction
• Loops, Events and Callbacks
• Server Rendering with Node & Express
• Riot And Webpack Setup
• Riot and Redux - Part 1
• Riot and Redux - Part 2
• Riot and Redux - Part 3
• Riot and Redux - Part 4
• Riot and Redux - Part 5
• Riot and Redux - Part 6

Libraries / Frameworks

• Flux- like event controller for Riot
• riotux - Simple Event Contoller for Riot.js
• 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 Flipcard - (Demo)
• Riot Grid - (Demo)
• ESLint Riot Plugin
• riot-animate
• Nest UI - (Demo)

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
• RiotJS Style Guide
• Riot Cheatsheet

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/