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.

Table of contents

• Official Links
• Articles
• Tutorials
• Screencasts
• Components
• Frameworks
• Examples
• Tools
• Cheatsheets
• 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

• Introduction to Riot.js by @avanslaars - YouTube [19:35]
• Loops, Events and Callbacks by @avanslaars - YouTube [13:54]
• Server Side Rendering by @avanslaars - YouTube [19:44]
• Setting up Webpack and Riot.js by @avanslaars - YouTube [10:42]
• Getting Started with Riot.js by @timkindberg - EggHead [02:40]
• Scoped CSS and Toggled Classes by @timkindberg - EggHead (PRO) [02:41]
• DOM Events by @timkindberg - EggHead (PRO) [02:49]
• Tag Options by @timkindberg - EggHead [02:20]
• Tag Life Cycle Hooks by @timkindberg - EggHead (PRO) [02:48]
• Repeating Elements with Each Attribute by @timkindberg - EggHead [04:02]

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

• Todo MVC
• Hacker News
• Shopping cart
• Autocomplete

Tools

• Riot Tag syntax checker

Cheatsheets

• by Rico Sta. Cruz
• by Martin Muzatko

Miscellaneous

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

Contribution Guidelines

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.

License