A declarative UI framework that retrofits dynamism to existing pages

batonjs is a declarative UI framework that retrofits dynamism to existing pages.
It retrofits dynamism to the HTML created on the server side, instead of creating it on the client side. By doing so, the following advantages are obtained:

batonjs also has the following outstanding characteristics:


Let's look at batonjs with a simple click-counting example.

    <p>Count: <span id="count">0</span></p>
    <button id="button" type="button">Count Up</button>

batonjs retrofits UI management to an existing HTML page. So even in this example the HTML is in its complete form.

import {baton} from '../asset/baton.esm.js'
const state = {count:0}
function show(state) {
  return {
    "#count": {
      innerText: state.count
document.getElementById('button').addEventListener('click', (ev) => {
  withState(state => ({count: state.count + 1}))
const withState = baton(state, show, document.body)

At line 2, the initial state of the page is defined. This object is used to invoke batonjs in line 13.

The show function on line 3 tells batonjs how to reflect the page state in the UI. It takes the latest page state, converts it to a UI declaration and returns it; a UI declaration is an object that represents what the UI should be.
The #count in line 5 is the CSS selector and the innerText in line 6 is the property name of the DOM element. These two lines certainly tell which property of which DOM element should have what value.

The withState function on line 11 is used to update the page state. When the callback function passed to withState returns a new page state, withState will reflect that state in the UI. Of course, the show function is used in the process.

At line 13, we invoke batonjs, which will return withState to manage the state we give it.

In this way, batonjs can be used to program dynamic web pages in a manner similar to CSS.

There is a real working example] of this example in the live samples. There are many more working live samples included in this repository.


From CDN

Installation of batonjs is not required; loading it from CDN is recommended as it is easier.
You can also download it from CDN in advance and deploy it on your own server.

ES Module format

<script type="module">
import {baton} from ''

UMD format

<script src=""></script>
const baton = batonjs.baton
From npm

If you install with npm, there is room for bundling and tree shaking.

$ npm install @vividcolors/batonjs

ES Module format

import {baton} from '@vividcolors/batonjs'

CommonJS format

const {baton} = require('@vividcolors/batonjs')

Runtime Requirements

  • Chrome, latest
  • Edge, latest
  • Firefox, latest
  • Chrome for Android, latest
  • iOS Safari, latest
  • Node.js, v14 or greater