Getting Started

You can grab Helix and all the official renderers from NPM:

npm install helix-js


Helix provides a function to create a new application that come in two flavours:

With Routing

Typical for large single-page-applications, the routes option instructs Helix to take care of routing for you.

  model: model,
  routes: routes,
  renderer: renderer(document.getElementById('root'))

Without Routing

Typical for adding interactivity to static websites, or using Helix in existing applications, the component option instructs Helix to ignore the URL and re-render the component on state changes.

  model: model,
  component: component,
  renderer: renderer(document.getElementById('root'))


Here's a simple example of an app with Helix + Yo-yo

import helix from 'helix-js'
import renderer from 'helix-js/src/renderers/yo-yo'
import html from 'yo-yo'

const mount = document.createElement('div')

  model: {
    state: { title: 'Learn Helix' },
    reducers: {
      setTitle: (state, title) => ({ title })
  component: (state, previous, actions) => html`
        oninput=${e => actions.setTitle(}
  render: renderer(mount),

results matching ""

    No results matching ""