• Public
  • Public/Protected
  • All



npm versionnpm downloads Twitter Follow

This project is part of the @thi.ng/umbrella monorepo.


Transducer based UI updater for @thi.ng/hdom. This is a support package for @thi.ng/transducers.

This package provides a single updateDOM function, a side-effecting & stateful transducer which receives @thi.ng/hdom 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 @thi.ng/hdom'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 @thi.ng/rstream-based 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 @thi.ng/hdom 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:


STABLE - used in production

Search or submit any issues for this package

Related packages

  • @thi.ng/hdom - Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors
  • @thi.ng/interceptors - Interceptor based event bus, side effect & immutable state handling
  • @thi.ng/rstream - Reactive streams & subscription primitives for constructing dataflow graphs / pipelines


yarn add @thi.ng/transducers-hdom
// ES module
<script type="module" src="https://unpkg.com/@thi.ng/transducers-hdom?module" crossorigin></script>

// UMD
<script src="https://unpkg.com/@thi.ng/transducers-hdom/lib/index.umd.js" crossorigin></script>

Package sizes (gzipped, pre-treeshake): ESM: 291 bytes / CJS: 343 bytes / UMD: 467 bytes


Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

ScreenshotDescriptionLive demoSource
Interactive image processing (adaptive threshold)DemoSource
Figlet-style bitmap font creation with transducersDemoSource
Basic crypto-currency candle chart with multiple moving averages plotsDemoSource
Mouse gesture / stroke analysis, simplification, corner detectionDemoSource
Interactive pattern drawing demo using transducersDemoSource
Various hdom-canvas shape drawing examples & SVG conversion / exportDemoSource
Canvas based Immediate Mode GUI componentsDemoSource
Worker based, interactive Mandelbrot visualizationDemoSource
Minimal Markdown to Hiccup to HTML parser / transformerDemoSource
Basic rstream-gestures multi-touch demoDemoSource
Polygon to cubic curve conversion & visualizationDemoSource
Animated Voronoi diagram, cubic splines & SVG downloadDemoSource
Minimal demo of using rstream constructs to form an interceptor-style event loopDemoSource
rstream based spreadsheet w/ S-expression formula DSLDemoSource
hdom based slide deck viewer & slides from my ClojureX 2018 keynoteDemoSource
Transducer & rstream based hdom UI updatesDemoSource


Generated API docs

Code for the above linked transducers-hdom example...

import * as rs from "@thi.ng/rstream";
import * as tx from "@thi.ng/transducers";
import { updateDOM } from "@thi.ng/transducers-hdom";

// root component function
const app = ({ ticks, clicks }) =>
        `${ticks} ticks and `,
            { href: "#", onclick: () => clickStream.next(0) },
            `${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

If this project contributes to an academic publication, please cite it as:

  title = "@thi.ng/transducers-hdom",
  author = "Karsten Schmidt",
  note = "https://thi.ng/transducers-hdom",
  year = 2018


© 2018 - 2021 Karsten Schmidt // Apache Software License 2.0

Generated using TypeDoc