Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

riot

Simple and elegant component-based UI library

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402 (1 ratings)
Rated 5.0 out of 5
Subscribe to updates I use riot


Statistics on riot

Number of watchers on Github 12833
Number of open issues 23
Average time to close an issue 4 days
Main language JavaScript
Average time to merge a PR 1 day
Open pull requests 32+
Closed pull requests 63+
Last commit over 1 year ago
Repo Created almost 6 years ago
Repo Last Updated over 1 year ago
Size 7.95 MB
Homepage http://riotjs.com
Organization / Authorriot
Contributors127
Page Updated
Do you use riot? Leave a review!
View open issues (23)
View riot activity
View on github
Fresh, new opensource launches πŸš€πŸš€πŸš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating riot for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)
What people are saying about riot Leave a review
Simple api

Riot logo

Simple and elegant component-based UI library

Build Status MIT License Riot Forum Join the chat at https://gitter.im/riot/riot Join the chat (ja) at https://riot-jp-slackin.herokuapp.com/ OpenCollective Backers OpenCollective Sponsors

NPM version NPM downloads jsDelivr Hits Coverage Status Riot Size Code Quality

Sauce Test Status

Framework Size Comparison

Framework Version Minified Size (gzip)
Ember 2.17.0 122.39kb
@angular/core + Polyfills 5.1.2 87.46kb
Polymer + Web Components Polyfill Lite 1.8.0 66.3kb
React + Map and Set Polyfills 16.1.0 41.817kb
Web Components Polyfill 0.7.24 33.68kb
Vue 2.5.13 31.41kb
Riot 3.9.0 10.74kb
Inferno 4.0.2 7.98kb
Preact 8.2.6 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.

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.

Demos

Tutorials

Video Tutorials

Libraries / Frameworks

Components

Resources

Performance

Miscellaneous

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 git@github.com: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
$ make perf

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

6) Be patient

Credits

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


Gianluca Guarini

Official Website

http://riotjs.com/

Backers

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

Backers

Sponsors

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

Sponsors

riot open issues Ask a question     (View All Issues)
  • almost 3 years SELECT element with both id and name cannot be accessed by name
  • almost 3 years <input> in tag: value never updates
  • almost 3 years Arrays with multiple tags of the same name don’t contain actual tag elements
  • almost 3 years Component generated in an `each=` gets unmounted, although its entry in the each array still exists.
  • almost 3 years 'each' loops are triggering mount events when a global mixin is used
  • almost 3 years How to render a tag (works with webpack, and needed to compile) when server side rendering
  • almost 3 years The data-is attribute is not updated for dynamic tags
  • almost 3 years Speed up the rendering process
  • almost 3 years virtual with each doesn't remove tag references from parent tag
  • almost 3 years Each and switching between object and array
  • almost 3 years Anyone working on this? switch from makefile to a more crossplatform solution
  • almost 3 years Properties set in looped custom tag element event seem to be cleared by parent update
  • almost 3 years Fix saucelabs test in the @next branch
  • almost 3 years tag.update method changes properties of child tag unexpectedly
  • almost 3 years Listeners are not removed (riot next)
  • almost 3 years When compile with jade(pug), riot insert mysterious whitespace
  • almost 3 years Yield and expressions
  • almost 3 years riot+compiler.js:1245 Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node - when adding to an 'each' structure from a recursively created element onlick
  • almost 3 years Input numbers leave unprocessed expressions after upgrade to 2.6.0
  • about 3 years memory leak
  • about 3 years Tag file syntax highlighting on GitHub
  • about 3 years Patreon
  • about 3 years Tag root is not always in body when its mount event fires
  • about 3 years `require(*tag-name*)` does not allow `parserOptions`
  • about 3 years Riot Server and Fast First-View Renders
  • about 3 years Tag's options should be also inherited from the parent tags
  • about 3 years Initialization order issue
  • about 3 years Add angular style switch cases
  • about 3 years IE: updating of tags with SVG plus other children produces Syntax error
  • about 3 years riot@next: InnerHTML of custom elements within loops lose loop context
riot open pull requests (View All Pulls)
  • isObject w/o null
  • updated: update the copyright removing Muut from the distribution files
  • dynamic riot-tag and unmount issues
  • Prevent loop state from leaking out and getting modified.
  • Extend tag scope.
  • Unmount DOM when `if` becomes false
  • Don't render custom tag wrappers by default. Option
  • Added component
  • add settings flag preventListAutoReOrdering
  • use DOM 2 event handlers
  • added: Support to disable named elements on loops
  • fix tag.updateOpts impl
  • Dev
  • doc: remove `componentShouldUpdate` now that `shouldUpdate` exists
  • add Nest-UI into readme
  • cleanup api
  • closes #1649
  • updated: the riot.Tag method for es6 lovers
  • Gigaloop
  • [WIP] Supports ref attributes
  • Feature/fix recurse nest multi transclude
  • Originscope for Yield Tag
  • Update README.md
  • Adding a couple more components
  • Removes SPM support
  • Add hot reloading
  • Fixed rollup server side (cjs) transpilation.
  • #2 nested ref by yield append to defined tag's refs.
  • Fix: Backslash not escaped when requiring riot at top of tag
  • dynamic virtual fixes #2208
  • fix nested slot yield.
  • Update shouldUpdate to perform comparison against light-weight tag
riot questions on Stackoverflow (View All Questions)
  • Deserialize JSON from Riot API C#
  • Is it possible to separate the javascript code from the tag file in Riot Js?
  • Riot-tag inside of a loop
  • Browserify with Riot Custom Tags giving Type Error
  • Problems with deserializing Json from RIOT Api in C# UWP
  • Rendering riot routes while render
  • Get summoner ids from Riot API (php)
  • SyntaxError: Use of const in strict mode with Riot/TypeScript
  • Riot API - Construct 2 (ajax/.json)
  • (Riot-API) Grabbing id only from summoner (by-name) api call using angularJS
  • how to flash the RIOT image (RTOS) code into ATmega2560
  • How to pass variable to child tag using riot js
  • Riot LOL api static ddragon JSON
  • Building RIOT-OS hello-world example fails on QEMU emulated ARM board
  • How to make a variable update work in riot js
  • Improving code quality/organization of event-heavy riot applications
  • Riot custom tag not loading (hello world example)
  • riot jsfiddle breaks when adding a tag function
  • Karma + Riot Error: Uncaught SyntaxError: Unexpected reserved word
  • Riot JS unmount all tags in a page and then mount only one tag is not working
  • Fetch summoners by ranking in Riot Api
  • Ruby/Rails/Riot programmatically access test results
  • Getting a 401 (Unauthorized) while using Java to retrieve Riot API information
  • How to include 3rd party API in MVC 5 - Riot Games
  • PHP/JSON Array - Invalid argument supplied for foreach() using Riot Games API
  • How to use jQuery plugins in React, Riot 2.0
  • Riot Api - Json
  • JSON-LD in Jena RIOT?
  • JSON/PHP - RIOT API - How to retrieve datasets
  • Fatal error: Cannot use string offset as an array - riot api curl/json/php
riot list of languages used
Other projects in JavaScript