Simple and elegant component-based UI library

Custom tags • Enjoyable syntax • Elegant API • Tiny size

Why do we need a new UI library?

The frontend space is indeed crowded, but we honestly feel the solution is still “out there”. We believe Riot.js offers the right balance for solving the great puzzle.

So — here’s why we need one:

1. Custom elements

Riot.js brings custom elements to all modern browsers without the use of any polyfill!

<todo>
  <!-- layout -->
  <h1>{ props.title }</h1>

  <ul>
    <li each={ item in state.items }>{ item }</li>
  </ul>

  <form onsubmit={ add }>
    <input name="todo">
    <button>Add #{ state.items.length + 1 }</button>
  </form>

  <!-- style -->
  <style>
    :host {
      padding: 16px;
    }
  </style>

  <!-- logic -->
  <script>
    export default {
      state: {
        items: []
      },
      add(e) {
        e.preventDefault()
        const input = e.target.todo

        this.state.items.push(input.value)
        this.update()

        input.value = ''
      }
    }
  </script>
</todo>

A custom element glues relevant HTML and javascript together forming a reusable component. Think React + Polymer but with enjoyable syntax and a small learning curve.

Human-readable

Custom tags let you build complex views with HTML. Your application might look something like this:

<body>
  <h1>Riot.js application</h1>

  <my-header class="js-component"/>

  <main>
    <my-articles class="js-component"/>
    <my-sidebar class="js-component"/>
  </main>

  <my-footer class="js-component"/>

  <script>
    riot.mount('.js-component', { store: createApplicationStore() })
  </script>
</body>

HTML syntax is the de facto language of 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.

Riot.js tags are compiled to pure javascript before browsers can execute them.

DOM Expressions binding

Close to standards

Tooling friendly

2. Simple and minimalistic

Minimalism sets Riot.js apart from others:

1. Enjoyable syntax

One of the design goals was to introduce a powerful tag syntax with as little boilerplate as possible:

2. Small learning curve

Riot.js has between 10 and 100 times fewer API methods than other UI libraries.

3. Tiny size

4. Small, but complete

Riot.js has all the essential building blocks for modern client-side applications:

Riot.js is an “open stack”. It’s meant for developers who want to avoid framework specific idioms. The generic tools let you mix and match design patterns you prefer most.

Conclusion

Riot.js is Web Components for everyone. Think React + Polymer but without the bloat. Its API is heavily inspired by Vue.js but it contains instead just the bare minimum to build a modern frontend project. It’s intuitive to use and it weighs almost nothing. And it works today. No reinventing the wheel, but rather taking the good parts of what’s there and making the simplest tool possible.

The Riot.js design was driven by The Zen of Python, by Tim Peters philosophy, that’s our mantra:

Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Flat is better than nested.
Sparse is better than dense.
Readability counts.
Special cases aren’t special enough to break the rules.
Although practicality beats purity.
Errors should never pass silently.
Unless explicitly silenced.
In the face of ambiguity, refuse the temptation to guess.
There should be one– and preferably only one –obvious way to do it.
Although that way may not be obvious at first unless you’re Dutch.
Now is better than never.
Although never is often better than right now.
If the implementation is hard to explain, it’s a bad idea.
If the implementation is easy to explain, it may be a good idea.
Namespaces are one honking great idea – let’s do more of those!