A minimalist component class inspired by React and Web Components.


  • Tonic is tiny. About 150 lines of code.
  • React-like component composition.
  • One-way binding; pipe data though connected components.
  • Prefer event delegation over individual event listeners.
  • Prefer Javascript Template Literals to weird Template Langauges.
  • Unopinionated about Routers, Reducers, Validators, etc.


  • 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.
  • "Isomorphic" components add a huge amount of complexity to a component
    library. I don't send html from a server very often. My html
    pages are pretty static and served by a cdn. Otherwise, I'm creating
    electron apps for the decentralized web. This may be a deal breaker for
    some people doing more traditional client-server development.
  • JSX
  • Magic


npm install hxoht/tonic


class Greeting extends Tonic {
  stylesheet () {
    return `
      greeting div {
        display: inline-block;
        border: 1px dotted #666;
        height: 100px;
        width: 100px;
        line-height: 90px;

  click (event) {

  render () {
    return this.html`
      <h1 class="example">

<greeting value="Hello, World">