A minimalist composable component inspired by React, based on Web Components.


  • Quickly read and understand the whole codebase; ~100 lines.
  • React-like component composition.
  • One-way binding; pipe data though connected components.
  • Single source event dispatch; no event rebinding needed.
  • Bring your own Routers, Reducers, Validators, etc.
  • True encapsulation via standard web technology.


  • When re-rendering performance is truly important, a virtual dom is
    not the right tool. In these cases you should either A. update some
    specific dom nodes directly or B. use a graphics/animation engine. The
    one-way-everywhere approach might make some code easy to reason about,
    but it ends up being a performance compromise with added complexity.
  • JSX
  • Magic


Install using npm, yarn, etc.

npm install hxoht/tonic

Import the component constructor.

const Tonic = require('tonic')
class ChildComponent extends Tonic {
  // A constructor is not required.
  constructor (props) {

    // One way of adding styles (check the render function
    // for how it's used). Since it's just a string it could
    // be read-in from a separate file at compile-time.
    this.stylesheet = `
        div {
          display: inline-block;
          border: 1px dotted #666;
          height: 100px;
          width: 100px;
          line-height: 90px;

  // You can listen to any dom event by creating a method with
  // the corresponding name. The method will receive the plain
  // old Javascript event object.
  mouseover (e) { = someRandomColor

  mouseout (e) { = '#fff'

  // The render function should return a string. This could
  // come from an external file or it can be a string of html.
  render () {
    return `
      <div class="child">
        Child ${this.props.value}