davideast/observable-dom

Observable-dom is an experimental project that lets you build interactive web page elements whose display updates automatically whenever new data comes in. Instead of writing complex logic to sync your UI with changing data, you write a template with placeholders and feed it a stream of values. When a new value arrives, the template re-renders on its own. At a high level, it works by combining two things: HTML templates and something called observables (from a library called RxJS). Observables are essentially pipelines that emit new data over time. You write a template with familiar-looking HTML, using double braces like {{ name }} for text, attributes like [id]="name" for element properties, and #name to tag inputs you want to read values from. You can also wire up button clicks with syntax like (click)="update$". When you connect an observable to your element, each new piece of data it emits triggers a fresh render of the template with those values filled in. This would appeal to developers who already use RxJS and want a lightweight way to bind data streams directly to the DOM without pulling in a full framework. The README's own example shows a profile card with name and age fields where clicking an Update button reads the input values and pushes the new state through the pipeline, instantly refreshing the display. The project's author is upfront that this is an early-stage experiment that may not even pan out. It is not published as a package and has a list of unfinished work. One notable design choice is that you register the custom element yourself, which avoids naming collisions but means a bit more setup. The template syntax borrows ideas from popular frameworks, so it may feel familiar even if the underlying observable-driven approach is unconventional.