Brio.js v5: Adding Interactivity to Existing Pages

Description and use

Brio.js v5 enables adding interactivity to existing web pages without heavy frameworks, using b-* attributes for reactivity, keeping global scope clean, and auto‑cleaning on unmount.

Problem

Adding interactivity to parts of existing web pages without requiring a full framework rewrite or external dependencies.

Outcome

Brio.js enables adding interactive widgets to existing pages with minimal footprint, no virtual DOM, no compiler, and no runtime dependencies, while maintaining clear data scoping and cleanup.

Workflow

• 1. Include Brio script via CDN or npm.
• 2. Add b-* attributes to desired DOM elements.
• 3. Call brio.createApp({state:()=>({...})}).mount('#element').
• 4. Interact; Brio updates the DOM reactively.
• 5. On removal, Brio cleans up event listeners and state.

Evidence

Brio adds reactivity to HTML with b-* attributes. It works on the real DOM, in place. No virtual DOM, no JSX, no required compiler, and no runtime dependencies.

Source

It only owns what you mount. You can mount Brio around one form in a Rails view, one menu in a WordPress theme, or one calculator in an old PHP page. It doesn't care what's around it, and it won't touch anything outside the element you gave it.

Source

The standard build uses new Function, which a policy that forbids unsafe-eval blocks. Since 5.1 there's a CSP build (@jnreis/briojs/csp) that runs without eval.

Source