• Stars
    star
    14,827
  • Rank 1,857 (Top 0.04 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 10 years ago
  • Updated 13 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simple and elegant component-based UI library

Riot logo

Simple and elegant component-based UI library

Build Status MIT License Join the discord community channel 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

Custom components β€’ Concise syntax β€’ Simple API β€’ Tiny Size

Riot brings custom components to all modern browsers. It is designed to offer you everything you wished the native web components API provided.

Tag definition

<timer>
  <p>Seconds Elapsed: { state.time }</p>

  <script>
    export default {
      tick() {
        this.update({ time: ++this.state.time })
      },
      onBeforeMount(props) {
        // create the component initial state
        this.state = {
          time: props.start,
        }

        this.timer = setInterval(this.tick, 1000)
      },
      onUnmounted() {
        clearInterval(this.timer)
      },
    }
  </script>
</timer>

Open this example on Plunker

Mounting

// mount the timer with its initial props
riot.mount('timer', { start: 0 })

Nesting

Custom components let 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.

Performant and predictable

  • Absolutely the smallest possible amount of DOM updates and reflows.
  • Fast expressions bindings instead of virtual DOM memory performance issues and drawbacks.
  • One way data flow: updates and unmounts are propagated downwards from parent to children.
  • No "magic" or "smart" reactive properties or hooks
  • Expressions are pre-compiled and cached for high performance.
  • Lifecycle methods for more control.

Close to standards

  • No proprietary event system.
  • Future proof thanks to the javascript module syntax.
  • The rendered DOM can be freely manipulated with other tools.
  • No extra HTML root elements, data- attributes or fancy custom attributes.
  • No new syntax to learn.
  • Plays well with any frontend framework.

Use your dearest language and tools

Powerful and modular ecosystem

The Riot.js ecosystem is completely modular, it's designed to let you pick only the stuff you really need:

CDN hosting

How to contribute

If you are reading this it's already a good sign and I am thankful for it! I try my best working as much as I can on riot but your help is always appreciated.

If you want to contribute to riot helping the project maintenance please check first the list of 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 your 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 [email protected]: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

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

6) Be patient

Credits

Riot is actively maintained with ❀️ by:


Gianluca Guarini

Many thanks to all smart people from all over the world who helped improving it.

Official Website

https://riot.js.org

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

Thanks

Special thanks to Browserstack and JetBrains for their support

jetbrains browser stack

More Repositories

1

examples

Demos and examples for Riot and submodules
Riot
357
star
2

route

Simple isomorphic router
JavaScript
212
star
3

riotify

browserify plugin for riot files
JavaScript
96
star
4

observable

Simple script to listen and dispatch events
JavaScript
65
star
5

riot.github.io

Riot.js official website
HTML
65
star
6

compiler

Riot.js compiler
JavaScript
62
star
7

webpack-loader

Riot official webpack loader
JavaScript
56
star
8

tmpl

Riot template engine
JavaScript
51
star
9

made-with-riot

A list of apps and components made with Riot.js library
JavaScript
47
star
10

cli

Riot.js command line tool
JavaScript
45
star
11

animore

Riot tags animations hooks
JavaScript
43
star
12

custom-elements

Simple API to create vanilla custom elements with riot
JavaScript
34
star
13

ssr

Riot.js node Server Side Rendering
JavaScript
29
star
14

rollup-plugin-riot

Rollup Plugin for Riot
JavaScript
25
star
15

dom-bindings

Riot.js DOM Bindings template engine
JavaScript
21
star
16

karma-riot

A Karma plugin. Compile and test HTML and JS in Riot tag files.
JavaScript
19
star
17

hot-reload

Riot hot reload API
JavaScript
16
star
18

hydrate

Riot.js hydrate rendering for SSR applications
JavaScript
15
star
19

syntax-highlight

Riot tags syntax rules
14
star
20

babel-preset-es2015-riot

The default riot babel preset
JavaScript
14
star
21

parcel-transformer-riot

A parcel plugin for riot.js
JavaScript
11
star
22

lazy

Lazy components loader for Riot.js
JavaScript
10
star
23

parser

Parser for the riot tags
JavaScript
9
star
24

now

Riot.js now builder
JavaScript
6
star
25

eslint-config

Riot.js default eslint config file
JavaScript
5
star
26

online-compiler

Compile your riot tags to javascript online
JavaScript
4
star
27

create-riot

Riot.js Components and Projects scaffolder
JavaScript
4
star
28

dom-nodes

List of all the available DOM and SVG nodes and helper functions to quickly test against them
JavaScript
4
star
29

bump

Simple CLI tool for bump a new version
JavaScript
3
star
30

branding

The Riot.js logos and branding files
3
star
31

util

Shared util functions that are used in several Riot.js modules
JavaScript
3
star
32

parcel-template

Riot.js Parcel Project scaffolding Template - Used in create-riot
JavaScript
2
star
33

webpack-template

Riot.js Webpack Project scaffolding Template - Used in create-riot
JavaScript
1
star
34

component-template

Riot.js Component scaffolding Template - Used in create-riot
JavaScript
1
star
35

riotjs.com

This repository is only needed to handle the redirects to our new domain riot.js.org
HTML
1
star
36

legacy

Riot.js legacy documentation
HTML
1
star
37

babel-preset

Babel Preset config used to compile all the Riot.js core modules
JavaScript
1
star