https://caldom.org CalDOM JS Logo An agnostic, reactive & minimalist (3kb) JavaScript UI library with direct access to native DOM. Just ~ 0.04x Slower than Vanilla JS at unit level View benchmark results against Vanilla JS, Vue JS, React JS, jQuery & more. Instead of pulling you into a library-specific magical world, CalDOM let you fully access the DOM directly while keeping the reactivity. So you could take full advantage of native APIs & mix it with other libraries to gain superior performance & flexibility in the development process. Get Started Documentation GitHub Zero tooling, zero dependencies, zero new syntax, just pure JS. Hello World Use it as a chainable DOM traverser and a manipulator, a lightweight jQuery alternative. We use _ (underscore) to access CalDOM. [_("#output-1") .] Run Hello World - Reactive Build reactive components. Use it as a lightweight React JS/Vue JS alternative. Not using classes, similar to React Hooks, but simpler. [let app = _().react(] Run Hello World - Reactive (ES6) Also works as an extended ES6 class. [class HelloWorld ext] Run Reactive Native DOM Elements Native DOM Node is a first-class citizen. Also, a CalDOM instance is just a wrapper around them. This agnostic interoperability allows for an infinite amount of powerful integrations. [let app = _().react(] Run Make existing HTML reactive Not a fan of rendering & virtual-DOM thingies? Use CalDOM to update() pre-defined HTML content reactively. CalDOM's API is inspired by jQuery. [let person_one = _("] Name: Age: Run Summon the power of both worlds! Efficiently update() the DOM directly and/or proceed to virtual-DOM render if it's more suitable. Use this.$ to hold direct DOM Node references. CalDOM keeps them in sync even when render() drastically alter the DOM structure. [class Person extends] Run There's a lot going on here. In fact, this is the essence of CalDOM's offering. When there is an update() function defined, CalDOM calls it instead of calling the render(). This gives us a chance to avoid expensive virtual-DOM diffing and update the DOM directly. The first render() get executed regardless and note we ask CalDOM to remember the direct H1 element using this.$.title = _(...).elem there. The state changes are batched because it's obviously very expensive to update the DOM on each state variable change. CalDOM waits for main thread to be idle via requestAnimationFrame and then execute render()/update() efficiently. Hence, the update() function retrieve two additional arguments as changed_keys & changes_count. This is what state variables changed & how many changes batched since the last render. These can be used to decide whether it's suitable to update the DOM directly. If not, we can simply proceed with the render() by returning true. Since CalDOM's basic building box is the native DOM, it can switch between render() & update() seamlessly. In above example, the name change after the 1-second timeout is handled by the update() function. Thus, it execute this.$.title .textContent = "..." directly without any expensive virtual-DOM involvement. Use HTML to create Similar to JSX, but with vanilla HTML & JavaScript. No compilers required. [class Person extends] Run You can even make jQuery reactive Basic building box of CalDOM is just native Node/Element. Thus, making it compatible with almost any DOM library on the web. [class HelloJquery ex] Run Todo App - Non Reactive CalDOM does not dictate your coding style or approach. It's super flexible & scalable from a single element to large nested implementations. [_("#output-7", [ ] Run Todo App - Reactive CalDOM renders a virtual-DOM and efficiently updates only changed elements in the actual DOM. Multiple renders are batched to only run once. [class TodoApp extend] Run Todo App - Multiple Nested Reactive Components CalDOM plays nicely with nested reusable reactive components and takes care of all DOM updates efficiently. No matter how deeply nested, components only get re-rendered if their state is changed. [// ToDo Item Compone] Run CalDOM also runs on Node JS You can use a library like JS-DOM to implement a browser context on the server. [const { JSDOM } = re] Fetching and rendering content generated in the server. [class ClientApp exte] Run Please note that we did not use classes to keep the examples simple without HTML & CSS. But in practice, always prefer using external CSS over directly setting CSS on elements due to obvious reasons. CalDOM has addClass(), removeClass() methods to facilitate this. Multiple element instances, built-in XPath support & there is much more View more examples in the Documentation Get Started CDN [