Get it

npm install domma-reactive

import {observable, computed, applyBindings} from 'domma-reactive';   // ESM
const {observable} = require('domma-reactive');                       // CommonJS

<script src="https://cdn.jsdelivr.net/npm/domma-reactive@1/dist/domma-reactive.min.js"></script>
<script>
    const count = DommaReactive.observable(0);
</script>

<script type="module">
    import {observable} from 'https://cdn.jsdelivr.net/npm/domma-reactive@1/+esm';
</script>

Where it lives

What arrives

33 exports, and nothing else is public:

observable  observableArray  computed  effect  untracked  flushSync  isEqual
applyBindings  compile  annotate  scanBlocks  TemplateCompiler  renderTemplate
registerBinding  unregisterBinding  registerComponent  unregisterComponent
registerExtender  unregisterExtender  registerHelper  unregisterHelper
createRootContext  createChildContext  trackingProxy
parseExpression  evaluateAst  evaluateExpression  compileExpression
expressionDependencies  clearExpressionCache  Computation  Dep  DepMap

The reactive core - observable, computed, effect, expressions, contexts and the renderer - needs no DOM and runs in Node or a worker. Only the compiler functions touch document, and only when you call them.

TypeScript declarations ship in the package (dist/domma-reactive.d.ts) - nothing to install from @types. observable(0) is an Observable<number>, and assigning to a read-only computed is a compile error rather than a runtime warning.

Standalone, or already there

domma-reactive is the reactive core of Domma JS, published on its own. Use it by itself, as above - or, if a page already loads Domma, it is there as M: M.observable, M.computed and M.applyBindings are this library. Domma CMS is built on the same pair, so every admin screen in it is a working example of the bindings on this site.

The thirty-second version

<div id="app">
    <input type="number" data-model="qty.value">
    <p data-bind-text="total.value"></p>
</div>

import {observable, computed, applyBindings} from 'domma-reactive';

const price = observable(10);
const qty   = observable(3);
const total = computed(() => price.value * qty.value);

applyBindings({price, qty, total}, document.querySelector('#app'));

Type in the box; the paragraph follows. Nothing else on the page is touched, because every binding got its own effect and each effect knows exactly what it read.