jsRibbon attaches reactive behavior to server-rendered HTML using data-bind
attributes — no virtual DOM, no compiler, no build step.
<!-- 1. Include the library --> <script src="jsRibbon.js"></script> <!-- 2. Register a component --> <script> jsRibbon.component('Counter', ($state) => { const increment = () => $state.count++; const decrement = () => $state.count--; return { increment, decrement }; }); </script> <!-- 3. Write HTML — DOM is the state --> <div data-bind="component:Counter"> <span data-bind="text:count">0</span> <button data-bind="click:increment">+</button> <button data-bind="click:decrement">−</button> </div>
Why jsRibbon
A lightweight approach to reactive UIs that respects your server-rendered HTML.
Register named components with jsRibbon.component(). Each instance is scoped and isolated.
Server-rendered HTML is your template. No JSX, no .vue files — just HTML with data-bind attributes.
The live DOM is the source of truth. Initial values are read directly from element content and values.
Components can access parent contexts via dotted names like layout.users.
Basic bindings like text, value, class, and visible work with zero JS — just HTML attributes.
MutationObserver watches for injected HTML and registers components automatically — no manual rebind.
Content is present in the initial HTML for crawlers. jsRibbon hydrates in place without replacing markup.
Component methods registered before markup arrives stay alive — they activate when elements appear.
maxlength, pattern, required and friends keep working as-is —
min/max are even enforced live, not just at submit.
Get Started
No bundler, no build step — one script tag and you're binding.
No download, no hosting — points at the latest tagged release on jsDelivr. Pin a
version for production: swap @latest for e.g. @v1.0.0.
Download dist/jsRibbon.min.js (or dist/jsRibbon.js
unminified) from the repo, drop it next to your HTML, and reference it with a relative path — no CDN
dependency, works fully offline.
Clone the repo to read the source, run the examples locally, or build from
src/jsRibbon.js yourself.
Script tag in place? Read the Quick Start → — register a component and bind your first element.