Features

Seven parts, each small enough to read in a sitting - and each running on this page.

domma-reactive is a reactivity graph and a binding layer. Every page below takes one part of it, runs a small demo you can use, and shows you the source that demo is running - read from the file itself, so the listing can never drift from what the page does.

01Observables and computedsState you read through .value, and derived values that discover their own inputs. 02BindingsTwelve kinds of data-* attribute, activated on markup your server already rendered. 03Keyed listsReconciled by key, so a row keeps its element - and its focus and half-typed input - when the list changes. 04ExpressionsA hand-written parser: operators, ternaries, helpers and, since 1.2, object and array literals. No eval. 05Components and slotsMarkup with its own private state, swapped by an observable, with holes the page can fill. 06ExtendersrateLimit and friends: hold the notification, never the write. 07Safety and warningsMistakes fail closed and say so, naming the element, the expression and the fix.

See them running

The safety demo: bare-observable, method-call and nested virtual-block mistakes failing closed, with the library's three warnings captured in a console panelMistakes fail closed, and the console says why A keyed list after reversing: notes typed into unbound inputs have travelled with their rowsReverse the list - the notes you typed go with their rows Risk: High in bold red, styled by an object literal and labelled by an array literal in the bindingObject and array literals, straight in the attribute A rate-limited search box: 17 keystrokes written, 1 announcement, heard 'reactive bindings'17 keystrokes, one announcement Celsius 37 and Fahrenheit 98.6, kept in step by a writable computedA computed you can type into

At a glance
Version 1.2.0 - what's new
Size 65 KB minified, about 21 KB gzipped, no dependencies
Exports 33 named exports, TypeScript declarations included
Tests 996, plus every export checked through require(), import() and a <script> tag
Security No eval, no Function constructor - works under script-src 'self'
Licence MIT

New to it? The tutorial builds a working contacts page in twelve steps. Moving from Knockout? See how it compares.