Awesome Riot.js

A curated list of awesome Riot.js resources! The library is created by the incredible folks at Muut. Please refer the contribution guidelines and the license for more information.

• Official Links
• Articles
• Tutorials
• Screencasts
• Components
• Frameworks
• Examples
• Miscellaneous

Official Links

• Project homepage
• Github page
• Code playground
• Official guide
• API Docs
• Frequently Asked Questions
• Examples by community
• Download links: JSDelivr, CDN, NPM, Bower, Git
• Branding: 60x30, 120x60, 240x120, 480x240, 512x512, 960x480

Articles

• Comparison with React and Polymer
• Riot compiler explained
• Using Riot tags with Gulp and Browserify

Tutorials

• Building Apps with Riot, ES6 and Webpack
• Building a tabbed interface with Riot
• Building a comment section with Riot
• Building a clock custom tag with Riot
• Building a todo app with Riot

Screencasts

• YouTube

  • Introduction to Riot.js by @avanslaars
  • Loops, Events and Callbacks by @avanslaars
  • Server Side Rendering by @avanslaars
  • Setting up Webpack and Riot.js by @avanslaars

• EggHead

  • Getting Started with this React-like micro-library by @timkindberg
  • Scoped CSS and Toggled Classes by @timkindberg (PRO)
  • DOM Events by @timkindberg (PRO)
  • Tag Options by @timkindberg
  • Tag Life Cycle Hooks by @timkindberg (PRO)
  • Repeating Elements with Each Attribute by @timkindberg

Components

• Riot Material UI
• Riot Gear
• Riot Bootstrap

Frameworks

• Angular.js + Riot.js
• Riot.js Starter Kit
• Riot.js for TypeScript
• Riot.js + require.js

Examples

• Riot Tag syntax checker
• Countup Timer
• Todo List
• Todo MVC
• Hacker News
• Shopping cart
• Autocomplete

Miscellaneous

• Q&A with RiotJS author Tero Piirainen
• Riot Detector Chrome Extension
• Riot Atom Package
• Riot Sublime Package

Please feel free to suggest new resources by creating a new issue and submit translation in other languages by creating a new pull request. Few points to note,

• Use one of the appropriate lables, namely, #official-links, #tutorials, #demos, #miscellaneous while creating a new issue to categorize the resource.
• To request the addition of a new label, raise a separate issue to create the label first and tag it appropriately with the #new-label.
• To update the hyperlink of a resource, already present in the list, use the label #updated-link and include the new hyperlink in the body of the issue page.