-JOIN_CHAT_%E2%86%92-551a8b.svg?style=flat-square){kind=icon}
| Framework | Version | Minified Size (gzip) |
|---|---|---|
| @angular/core + Polyfills | 6.0.9 | 141.79kb |
| Ember | 2.18.2 | 121.84kb |
| Polymer + Web Components Polyfill Lite | 1.8.0 | 66.3kb |
| React + Map and Set Polyfills | 16.4.0 | 41.60kb |
| Web Components Polyfill | 0.7.24 | 33.68kb |
| Vue | 2.5.16 | 31.64kb |
| Riot | 3.11.1 | 10.78kb |
| Inferno | 5.3.0 | 7.77kb |
| Preact | 8.2.9 | 3.45kb |
The above comparison includes polyfills to support old browsers like IE9 that in Riot.js are supported by default
Riot is supported by all modern browsers and it does not require any additional polyfill
Riot brings custom tags to all modern browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.
<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>
riot.mount('timer', { start: 0 })
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.
data- attributes.Note: * officially maintained
class={ enabled: is_enabled, hidden: hasErrors() }.render, state, or constructor.Add #{ items.length + 1 } or class="item { selected: flag }"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
$ git clone git@github.com:riot/riot.git && cd riot
$ git checkout -b feature/my-awesome-patch
$ npm i
# 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
dev branch making sure you have read our pull request templateRiot 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 |
Support us with a monthly donation and help us continue our activities. Become a backer
Become a sponsor to get your logo on our README. Become a sponsor
Special thanks to Browserstack for their support
FAQs
Simple and elegant component-based UI library
The npm package riot receives a total of 4,851 weekly downloads. As such, riot popularity was classified as popular.
We found that riot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.