Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including with all npm packages installed. Try it out:

var transducersHdom = require("")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors. v2.0.20

Transducer based UI updater for

npm version npm downloads Twitter Follow

This project is part of the monorepo.


This package provides a single updateDOM function, a side-effecting & stateful transducer which receives component trees, diffs each against the previous value and applies any required changes to the browser DOM, starting at given root element. By default, incoming values are first normalized using's normalizeTree() function. See hdom's start() function for more details.

If the hydrate option is given, the first received tree is only used to inject event listeners and initialize components with lifecycle init() methods and expects an otherwise identical pre-existing DOM. All succeeding trees are diffed then as usual.

This transducer is primarily intended for dataflow graphs, where it can be used as final leaf subscription / stream transformer to reflect UI changes back to the user, without using the usual RAF update loop used by by default. In this setup, DOM updates will only be performed if the stream this transducer is attached to receives new values (i.e. hdom component trees).

Please also see the following hdom references for further details:


yarn add


Usage examples

The below example is also available in the /examples directory.

Live demo

import * as rs from "";
import * as tx from "";
import { updateDOM } from "";

// root component function
const app = ({ ticks, clicks }) =>
        `${ticks} ticks and `,
            { href: "#", onclick: () => },
            `${clicks} clicks`]

// click stream (click counter)
const clickStream = new rs.Stream().transform(tx.scan(tx.count(-1)));

// stream combinator
    src: {
        ticks: rs.fromInterval(1000),
        clicks: clickStream,
    reset: false,
    // transform into hdom component,
    // apply as DOM
    updateDOM({ root: document.body })

// kick off;


  • Karsten Schmidt


© 2018 Karsten Schmidt // Apache Software License 2.0

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free