HYDROXIDE
High-performance reactive JavaScript framework.
No Virtual DOM. No Re-renders. No Dependency arrays.
Compiled to Optimal DOM manipulation
Hydroxide compiler transforms JSX into optimal DOM manipulation code by extracting out static parts to templates and generating code for the most performant way to hydrate the DOM nodes
import { reactive } from 'hydroxide'; function Example() { const count = reactive(0); function increment() { count.set(count() + 1); } // open the console to see the logs // when state is updated, component does not re-render console.log('No renders!') return ( <button on-click={increment} class="primary-button"> count is {count()} </button> ); } export default Example;
import { template as _template, insert as _insert, delegateEvents as _delegateEvents } from "hydroxide-dom";
const _tmpl = /*#__PURE__*/_template("<button class='primary-button'>count is <!></button>");
import { reactive } from 'hydroxide';
function Example() {
const count = reactive(0);
function increment() {
count.set(count() + 1);
}
// open the console to see the logs
// when state is updated, component does not re-render
console.log('No renders!');
return /*#__PURE__*/(() => {
const _root = _tmpl.cloneNode(true),
_node = _root.firstChild.nextSibling;
_root.$$click = increment;
_insert(_node, count);
return _root;
})();
}
export default Example;
_delegateEvents(["click"]);Ultra High Performance
Hydroxide delivers exceptional runtime performance by eliminating unnecessary work. No virtual DOM diffing. No tree reconciliation. Just surgical updates directly to the exact nodes that change.
Benchmarked on JS Framework Benchmark- the standard for comparing framework performance
Scores show geometric mean across all operations.
Lower scores indicate faster performance. 1.0 is vanilla JavaScript baseline.
Fine-grained updates. Zero overhead.
Hydroxide uses fine-grained reactivity. When state changes, only the specific DOM nodes that depend on it update surgically. Component instances only run once
import { reactive } from 'hydroxide'; function Example() { const count = reactive(0); function increment() { count.set(count() + 1); } // open the console to see the logs // when state is updated, component does not re-render console.log('No renders!') return ( <button on-click={increment} class="primary-button"> count is {count()} </button> ); } export default Example;
Automatic tracking. Fewer bugs.
Hydroxide's runtime automatically tracks which reactive values your effects read - No need for manual dependency arrays
import { reactive, effect } from 'hydroxide'; function Example() { const countA = reactive(0); const countB = reactive(0); // Only tracks countA - ignores countB changes // open the console to see the logs effect(() => { console.log('Counter A updated:', countA()); }); function incrementA() { countA.set(countA() + 1); } function incrementB() { countB.set(countB() + 1); } return ( <div class="container"> <button on-click={incrementA} class="primary-button"> A is {countA()} </button> <button on-click={incrementB} class="primary-button"> B is {countB()} </button> </div> ); } export default Example;
Ergonomic APIs. Complex state made simple.
First-class support for performing complex state updates on nested objects, arrays. No third party required for performing immutable updates
import { reactive } from 'hydroxide'; function Example() { const state = reactive({ foo: { bar: { baz: 0 } } }); // performing complex state update is simple function increment() { state('foo', 'bar', 'baz').do(n => n + 1); } return ( <button on-click={increment} class="primary-button"> count is {state().foo.bar.baz} </button> ); } export default Example;
In Development
Hydroxide is still in development and not ready for production usage. APIs may change.