PHPackages fduarte42/riot - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. fduarte42/riot ActiveLibrary[Utility & Helpers](/categories/utility) fduarte42/riot ============== A React- like, 3.5K user interface library 0111JavaScript Since Sep 7Pushed 10y ago1 watchersCompare [ Source](https://github.com/fduarte42/riot)[ Packagist](https://packagist.org/packages/fduarte42/riot)[ RSS](/packages/fduarte42-riot/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) [![Riot logo](doc/logo/riot480x.png)](https://muut.com/riotjs/) A React- like, 3.5KB UI lib --------------------------- [](#a-react--like-35kb-ui-lib) [![Build Status](https://camo.githubusercontent.com/8a98d1b8d3c4e1fb395c0570d75f267338a8a406fde65367f9fc6d3af1d24543/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f72696f742f72696f742e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/riot/riot)[![Riot Forum](https://camo.githubusercontent.com/a4237a5f933b13dedfdf1eea0d9fe91aefbb889821f584561e78a7dc6dc9e434/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d7575742d4a4f494e5f434841542545322538362539322d6666303034342e7376673f7374796c653d666c61742d737175617265)](https://muut.com/riotjs/forum/)[![Join the chat at https://gitter.im/riot/riot](https://camo.githubusercontent.com/afed8e95ca6e73eb24b2973c8e434b225f4c53b5025d23f8a81d73872357438b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4749545445522d4a4f494e5f434841545f2545322538362539322d3164636537332e7376673f7374796c653d666c61742d737175617265)](https://gitter.im/riot/riot?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![NPM version](https://camo.githubusercontent.com/08c85ca4978cc18c108ca19127c341e16c16c60a6f8408e6ba07847b7c0708fb/687474703a2f2f696d672e736869656c64732e696f2f6e706d2f762f72696f742e7376673f7374796c653d666c61742d737175617265)](https://npmjs.org/package/riot)[![NPM downloads](https://camo.githubusercontent.com/7f7f8297fafcc44ee6d9289b35e92067a0407927eeed76c1e43b3b7444f73dd0/687474703a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f72696f742e7376673f7374796c653d666c61742d737175617265)](https://npmjs.org/package/riot)[![MIT License](https://camo.githubusercontent.com/8c3fd4e91799bbb5f887e1a50757097727a0ed93b440e74b289c2fb349faf0fc/687474703a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d3030303030302e7376673f7374796c653d666c61742d737175617265)](LICENSE.txt)[![Coverage Status](https://camo.githubusercontent.com/e5100c44ab96ef9d9e459386c189da696fc08e670320b4465767b286d6f9689e/68747470733a2f2f696d672e736869656c64732e696f2f636f766572616c6c732f72696f742f72696f742f6465762e7376673f7374796c653d666c61742d737175617265)](https://coveralls.io/r/riot/riot?branch=dev)[![Code Quality](https://camo.githubusercontent.com/5abd5f660e84a28ba076c881daa2a1cd9f1c0bb439bd43d959fb54333bf04247/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636c696d6174652f6769746875622f72696f742f72696f742e7376673f7374796c653d666c61742d737175617265)](https://codeclimate.com/github/riot/riot) [![Sauce Test Status](https://camo.githubusercontent.com/71630111734fc96944f6b058878daa40a69d89f9ba9495747bb25ff711433702/68747470733a2f2f73617563656c6162732e636f6d2f62726f777365722d6d61747269782f72696f746a732e737667)](https://saucelabs.com/u/riotjs) ### Framework Size Comparison [](#framework-size-comparison) FrameworkVersionMinified SizeEmber1.13.3493.3kbAngular1.4.2145.5kbReact0.13.3121.7kbWeb Components Polyfill0.7.5117.1kbPolymer1.0.6101.2kbRiot2.2.412.75kb### Custom tags • Concise syntax • Virtual DOM • Full stack • IE8 [](#custom-tags--concise-syntax--virtual-dom--full-stack--ie8) Riot brings custom tags to all browsers, including IE8. Think React + Polymer but with enjoyable syntax and a small learning curve. #### Tag definition [](#tag-definition) ``` Seconds Elapsed: { time } this.time = opts.start || 0 tick() { this.update({ time: ++this.time }) } var timer = setInterval(this.tick, 1000) this.on('unmount', function() { clearInterval(timer) }) ``` #### Mounting [](#mounting) ``` riot.mount('timer', { start: 0 }) ``` #### Nesting [](#nesting) Custom tags lets you build complex views with HTML. ``` ``` 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 [](#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 [](#close-to-standards) - No proprietary event system. - Event normalization for IE8. - 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 [](#use-your-dearest-language-and-tools) - Create tags with CoffeeScript, Jade, LiveScript, Typescript, ES6 or [any pre-processor](https://muut.com/riotjs/compiler.html#pre-processors) you want. - Integrate with NPM, CommonJS, AMD, Bower or Component - Develop with [Gulp](https://github.com/e-jigsaw/gulp-riot), [Grunt](https://github.com/ariesjia/grunt-riot), [Browserify](https://github.com/jhthorsen/riotify), or [Wintersmith](https://github.com/collingreen/wintersmith-riot) plugins ### Concise syntax [](#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 [](#demos) - [Riot Todo MVC](https://github.com/txchen/feplay/tree/gh-pages/riot_todo) - [Hackernews reader](http://git.io/riot-hn) - [Vuejs examples by Riotjs](https://github.com/txchen/feplay/tree/gh-pages/riot_vue) - [Flux-like ES6 Todo](https://github.com/srackham/riot-todo) - [Simple TODO](https://muut.com/riotjs/dist/demo/) - [Timer](http://jsfiddle.net/gnumanth/h9kuozp5/) - [Another flux demo caparable to React ones](http://txchen.github.io/feplay/riot_flux) - [Various experiments](http://richardbondi.net/programming/riot) - [Isomorphic application](https://github.com/ListnPlay/riot-isomorphic) - [flux-riot todo](http://mingliangfeng.me/flux-riot) - [Another Riot Todo MVC](http://nippur72.github.io/riotjs-todomvc/#/) ### Tutorials [](#tutorials) - [Building Apps with Riot, ES6 and Webpack](http://blog.srackham.com/posts/riot-es6-webpack-apps/) - [Building Apps with Riot, Babel and Browserify](https://github.com/txchen/feplay/tree/gh-pages/riot_babel) - [Building tabs with Riot](http://www.robertwpearce.com/blog/riotjs-example/) - [The "React tutorial" for Riot](https://juriansluiman.nl/article/154/the-react-tutorial-for-riot) - [How to package "tag libraries" in Riot](https://github.com/ivan-saorin/riot-tutorial-tags-pack-app) - [Another React tutorial with Riot](https://github.com/viliamjr/commentsTuto) - [Riot Custom Tag by Example](http://www.triplet.fi/blog/riot-custom-tag-by-example/) - [Riot Compiler Explained](http://www.triplet.fi/blog/riot-compiler-explained/) - [Adding compiled Riot tags to your Gulp + Browserify build](http://www.triplet.fi/blog/adding_compiled_riot_tags_to_your_gulp_browserify_build/) ### Video Tutorials [](#video-tutorials) - [Introduction](https://www.youtube.com/watch?v=al87U6NgRTc) - [Loops, Events and Callbacks](https://www.youtube.com/watch?v=T-ZV9dv93sw) - [Server Rendering with Node & Express](http://youtu.be/6ww1UXGJzcs) ### Libraries [](#libraries) - [Flux- like event controller for Riot](https://github.com/jimsparkman/RiotControl) - [flux-riot framework](https://github.com/mingliangfeng/flux-riot) - [Cheftjs - chinese framework for Riot](https://github.com/cheft/cheftjs) ### Components [](#components) - [RiotGear](https://riotgear.js.org) - [Riot Bootstrap](http://cognitom.github.io/riot-bootstrap/) - [iToolkit](https://github.com/BE-FE/iToolkit) ### Resources [](#resources) - [Riot + AngularJS](https://github.com/lucasbrigida/angular-riot) - [Module loader for WebPack](https://www.npmjs.com/package/riotjs-loader) - [Riot + Meteor](https://atmospherejs.com/xaiki/riotjs) - [Riot Snake Game](http://cdn.rawgit.com/atian25/blog/master/assets/riot-snake.html) - [Riot Tag Syntax Checker](http://cognitom.github.io/riot-checker/) - [Riot 文档中译版](https://github.com/Centaur/riotjs_doc_cn) 🇨🇳 - [Riot + Wintersmith](https://github.com/collingreen/wintersmith-riot) - [Riot precompiler plugin for lineman](https://github.com/Power-Inside/lineman-riot) - [Riot Startkit - Flux inspired skeleton app + WebPack + PostCSS](https://github.com/wbkd/riotjs-startkit) - [Yeoman generator - Generator riot mobile](https://www.npmjs.com/package/generator-riot-mobile) - [Yeoman generator - Generator riot element](https://www.npmjs.com/package/generator-riot-element) - [Riot for TypeScript](https://github.com/nippur72/RiotTS) ### Performance [](#performance) - **Riot vs React performance:** [(Riot version)](https://github.com/kazzkiq/samples/tree/gh-pages/perf/dom-riot-vs-vanilla) vs [(React version)](https://github.com/kazzkiq/samples/tree/gh-pages/perf/dom-react-vs-vanilla) ### Miscellaneous [](#miscellaneous) - [Q&A with RiotJS author Tero Piirainen](http://www.triplet.fi/blog/q-and-a-with-riotjs-author-tero-piirainen/) - [riot-detector（Chrome Extension）](https://chrome.google.com/webstore/detail/riot-detector/cnnmjeggdmicjojlnjghdgkdlijiobke) ### Credits [](#credits) Riot is made with ❤️ by many smart people. Thanks to all the contributors ``` project : riot repo age : 1 year, 11 months active : 392 days commits : 1653 files : 213 authors : 552 Gianluca Guarini 33.4% 400 Tero Piirainen 24.2% 150 Aurimas 9.1% 56 Tsutomu Kawamura 3.4% 45 rsbondi 2.7% 43 Alberto Martínez 2.6% 27 Marcelo Eden 1.6% 20 Kalman Speier 1.2% 18 Juha Lindstedt 1.1% 18 Márcio Coelho 1.1% 15 Anton Heryanto 0.9% 14 andynemzek 0.8% 14 Greg 0.8% 13 a-moses 0.8% 11 Hrvoje Šimić 0.7% 10 Andy VanEe 0.6% 9 Avner Peled 0.5% 8 Richard Bondi 0.5% 8 Mark Henderson 0.5% 8 Andreas Heintze 0.5% 7 Lee Tagg 0.4% 7 marciojcoelho 0.4% 7 Ashley Brener 0.4% 7 Tianxiang Chen 0.4% 7 Avnerus 0.4% 6 hemanth.hm 0.4% 6 sethyuan 0.4% 6 Jens Anders Bakke 0.4% 5 jigsaw 0.3% 5 Tatu Tamminen 0.3% 5 midinastasurazz 0.3% 4 blissland 0.2% 4 Jasmine Hegman 0.2% 4 xieyu33333 0.2% 4 Giovanni Cappellotto 0.2% 4 Eric Baer 0.2% 3 Artem Medeusheyev 0.2% 3 scott 0.2% 3 Jim Sparkman 0.2% 3 korige 0.2% 3 Alan R. Soares 0.2% 3 Magnus Wolffelt 0.2% 2 Mohammed Irfan 0.1% 2 Eric Capps 0.1% 2 Sergey Martynov 0.1% 2 Simon JAILLET 0.1% 2 Antonino Porcino 0.1% 2 Steve Clay 0.1% 2 Alexis THOMAS 0.1% 2 Tim Kindberg 0.1% 2 Tobias Baunbæk 0.1% 2 Jon Wolfe 0.1% 2 crazy2be 0.1% 2 jmas 0.1% 2 luffs 0.1% 2 oldpig 0.1% 2 Andrew Feng 0.1% 2 yibuyisheng 0.1% 2 Žiga 0.1% 2 陈海峰 0.1% 2 Bolt 0.1% 2 Andrew Kiellor 0.1% 2 Markus A. Stone 0.1% 2 Collin Green 0.1% 2 Andrew Luetgers 0.1% 2 Milosz 0.1% 2 Moot Inc 0.1% 2 Mtpc 0.1% 2 Antoine Goutagny 0.1% 2 Philippe CHARRIERE 0.1% 2 David Salazar 0.1% 1 kylobite 0.1% 1 Andrew L. Van Slaars 0.1% 1 Ari Makela 0.1% 1 Barkóczi Dávid 0.1% 1 Benoit Hirbec 0.1% 1 Boris Huai 0.1% 1 Claudio Holanda 0.1% 1 Constantin Rack 0.1% 1 Courtney Couch 0.1% 1 Danil Semelenov 0.1% 1 Eliseo Arias 0.1% 1 Fernando Correia 0.1% 1 Ian Walter 0.1% 1 Ivan Saorin 0.1% 1 Joel Thornton 0.1% 1 Jonathan Dumaine 0.1% 1 Jonny Buchanan 0.1% 1 Jorrit Schippers 0.1% 1 Justin Dorfman 0.1% 1 Juwan Yoo 0.1% 1 Liu Jin 0.1% 1 Marcin Jekot 0.1% 1 Matthew McCullough 0.1% 1 Maxence Dalmais 0.1% 1 Mike Breen 0.1% 1 Mike Ward 0.1% 1 Patrik Buckau 0.1% 1 Quim Calpe 0.1% 1 Riccardo Gueli Alletti 0.1% 1 Ryan O’Hara 0.1% 1 Sam Morgan 0.1% 1 Simone Vittori 0.1% 1 Steel Brain 0.1% 1 Steven Koch 0.1% 1 TZ | 天猪 0.1% 1 Tenor Biel 0.1% 1 The Gitter Badger 0.1% 1 Trent Ogren 0.1% 1 Umut Sirin 0.1% 1 XiongLiding 0.1% 1 Zach Aysan 0.1% 1 afc163 0.1% 1 borishuai 0.1% 1 boynet 0.1% 1 h2so5 0.1% 1 jamesnolanverran 0.1% 1 nino-porcino 0.1% 1 typicode 0.1% 1 xieyu03 0.1% 1 なりたけいすけ 0.1% ``` ### Health Score 23 — LowBetter than 27% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity10 Limited adoption so far Community20 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/2005497?v=4)[Tito Duarte](/maintainers/fduarte42)[@fduarte42](https://github.com/fduarte42) --- Top Contributors [![GianlucaGuarini](https://avatars.githubusercontent.com/u/879612?v=4)](https://github.com/GianlucaGuarini "GianlucaGuarini (557 commits)")[![tipiirai](https://avatars.githubusercontent.com/u/169330?v=4)](https://github.com/tipiirai "tipiirai (385 commits)")[![aurri](https://avatars.githubusercontent.com/u/80772?v=4)](https://github.com/aurri "aurri (150 commits)")[![cognitom](https://avatars.githubusercontent.com/u/16032?v=4)](https://github.com/cognitom "cognitom (58 commits)")[![rsbondi](https://avatars.githubusercontent.com/u/3729091?v=4)](https://github.com/rsbondi "rsbondi (53 commits)")[![aMarCruz](https://avatars.githubusercontent.com/u/6636980?v=4)](https://github.com/aMarCruz "aMarCruz (43 commits)")[![3den](https://avatars.githubusercontent.com/u/67904?v=4)](https://github.com/3den "3den (27 commits)")[![speier](https://avatars.githubusercontent.com/u/415836?v=4)](https://github.com/speier "speier (20 commits)")[![pakastin](https://avatars.githubusercontent.com/u/1475902?v=4)](https://github.com/pakastin "pakastin (18 commits)")[![Avnerus](https://avatars.githubusercontent.com/u/39962?v=4)](https://github.com/Avnerus "Avnerus (16 commits)")[![antonheryanto](https://avatars.githubusercontent.com/u/801714?v=4)](https://github.com/antonheryanto "antonheryanto (15 commits)")[![andynemzek](https://avatars.githubusercontent.com/u/1213547?v=4)](https://github.com/andynemzek "andynemzek (14 commits)")[![a-moses](https://avatars.githubusercontent.com/u/11050286?v=4)](https://github.com/a-moses "a-moses (13 commits)")[![shime](https://avatars.githubusercontent.com/u/703563?v=4)](https://github.com/shime "shime (11 commits)")[![andyvanee](https://avatars.githubusercontent.com/u/212280?v=4)](https://github.com/andyvanee "andyvanee (10 commits)")[![emehrkay](https://avatars.githubusercontent.com/u/24242?v=4)](https://github.com/emehrkay "emehrkay (8 commits)")[![AndreasHeintze](https://avatars.githubusercontent.com/u/2219544?v=4)](https://github.com/AndreasHeintze "AndreasHeintze (8 commits)")[![ashbrener](https://avatars.githubusercontent.com/u/116340?v=4)](https://github.com/ashbrener "ashbrener (7 commits)")[![marciojcoelho](https://avatars.githubusercontent.com/u/8591171?v=4)](https://github.com/marciojcoelho "marciojcoelho (7 commits)")[![txchen](https://avatars.githubusercontent.com/u/713074?v=4)](https://github.com/txchen "txchen (7 commits)") ### Embed Badge ![Health badge](/badges/fduarte42-riot/health.svg) ``` [![Health](https://phpackages.com/badges/fduarte42-riot/health.svg)](https://phpackages.com/packages/fduarte42-riot) ``` ### Alternatives [league/event Event package 1.6k141.6M184](/packages/league-event)[doganoo/php-algorithms A collection of common algorithms implemented in PHP. The collection is based on "Cracking the Coding Interview" by Gayle Laakmann McDowell 9485.4k7](/packages/doganoo-php-algorithms)[houdunwang/laravel-module laravel modules 531.9k](/packages/houdunwang-laravel-module) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)