In-browser compilation

The riot+compiler.js bundle lets you compile and execute riot tags directly in your browser for quick prototypes and tests.You can load riot tags into your browser by setting a type="riot" attribute on your script tags.For example:

<!-- mount point -->
<my-tag></my-tag>
<!-- <my-tag/> is specified in an external file -->
<script src="path/to/javascript/my-tag.riot" type="riot"></script>
<!-- include riot.js and the compiler -->
<script src="https://unpkg.com/riot@4/riot+compiler.min.js"></script>
<!-- compile and mount -->
<script>
(async function main() {
  await riot.compile()
  riot.mount('my-tag')
}())
</script>

Notice that in this case riot will internally transform all the export default expressions to enable a better support for browsers that don’t support javascript modules yet.

Riot can compile asynchronously all the external tags included via <script> into the DOM and via riot.mount it will render them.

You might prefer using data-src instead of src on your <script> tags stop your browser prefetching automatically any riot script tag in order to avoid to load the same resources twice. Riot will automatically fetch and compile your tags via ajax.

In-browser compilation with inline templates

Your Riot.js components could be also be included directly in your page via <template> tags. For example:

<!-- somewhere in your page -->
<template id="my-tag">
  <my-tag>
    <p>{ props.message }</p>
  </my-tag>
</template>

The riot+compiler.js bundle exposes the compileFromString and inject methods that combined together, can help you compiling the above component:

const tagString = document.getElementById('my-tag').innerHTML
// get the compiled code
const {code} = riot.compileFromString(tagString)
// create the riot component in runtime
riot.inject(code, 'my-tag', './my-tag.html')
riot.mount('my-tag')