Skip to content


Repository files navigation

Build Status Issue Count Coverage Status NPM version NPM downloads MIT License


This compiler will not work with older Riot.js versions. It's designed to work with Riot.js > 4.0.0. For Riot.js < 4.0.0 please check the v3 branch


npm i @riotjs/compiler -D


The riot compiler can compile only strings:

import { compile } from '@riotjs/compiler'

const { code, map } = compile('<p>{hello}</p>')

You can compile your tags also using the new registerPreprocessor and registerPostprocessor APIs for example:

import {
} from '@riotjs/compiler'
import pug from 'pug'
import * as babel from '@babel/core'

// process your tag template before it will be compiled
registerPreprocessor('template', 'pug', function (code, { options }) {
  const { file } = options
  console.log('your file path is:', file)

  return {
    code: pug.render(code),
    // no sourcemap here
    map: null,

// your compiler output will pass from here
registerPostprocessor(function (code, { options }) {
  const { file } = options
  console.log('your file path is:', file)

  // notice that babel.transformSync returns {code, map}
  return babel.transformSync(code)

const { code, map } = compile('<p>{hello}</p>', {
  // specify the template preprocessor
  template: 'pug',


compile(string, options)

@returns { code, map } output that can be used by Riot.js

  • string: is your tag source code
  • options: the options should contain the file key identifying the source of the string to compile and the template preprocessor to use as string

Note: specific preprocessors like the css or the javascript ones can be enabled simply specifying the type attribute in the tag source code for example

  <style type="scss">
    // ...

registerPreprocessor(type, id, preprocessorFn)

@returns Object containing all the preprocessors registered

  • type: either one of template css or javascript
  • id: unique preprocessor identifier
  • preprocessorFn: function receiving the code as first argument and the current options as second


@returns Set containing all the postprocessors registered

  • postprocessorFn: function receiving the compiler output as first argument and the current options as second

generateTemplateFunctionFromString(string, parserOptions)

@returns string with the code to execute the @riotjs/bindings template function

generateSlotsFromString(string, parserOptions)

@returns string with the code to generate components slots in runtime