Web components

Fasty allow you to create RiotJS web components. I'm pretty sure you know reactJS or vueJS ... so why RiotJS ?

I think RiotJS has everything you need for building nice web components without the pain to manage your dependencies. It has out of the box a compiler running in your browser. The cost of compilation is very low. Think about your reactJS or VueJS workflow (compilation, trans-typing, etc...) It comes with a lot of dependencies (look at your node_modules folder)... With RiotsJS it's simple as including a single javascript source in your HTML file.

Here a component (we use RiotJS v3)

First don't forget to include the javascript tag in the JS included text field in your layout.

{{ external | https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js }}

  <!-- layout -->
  <h3>{ opts.title }</h3>

    <li each={ item, i in items }>{ item }</li>

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

  <!-- style -->
    h3 {
      font-size: 14px;

  <!-- logic -->
    this.items = []

    add(e) {
      var input = this.refs.input
      input.value = ''


Once your component created you can insert it anywhere you want in your HTML code using


{{ riot | todo | mount }}

Each Web Components are autonomous ... So you can have multiple <todo></todo> with no issue.

Of course here it's a basic sample, but you could create a true dynamic component linked to your own API built within Fasty.

Here a demo :

<todo></todo> inserted below

<todo></todo> inserted below

<todo></todo> inserted below

And here a screenshot of my component within the admin UI

Leave a comment