VanillaJSX

VanillaJSX provides a syntactic sugar for creating HTMLElements.

It is a JSX render library that compiles JSX directly to real DOM elements — no virtual DOM, no diffing, no re-render loop. JSX runs once, eagerly building real HTMLElements, and all dynamic behavior is driven by signals bound to element attributes, children and event listeners at creation time.

These two snippets are equivalent:

const container = document.createElement('div');
const header = document.createElement('h1');
header.textContent = 'Hello, world!';
header.classList.add('custom-header');
container.setAttribute('id', 'header-container');
container.appendChild(header);

const container = (
    <div id="header-container">
        <h1 class="custom-header">Hello, world!</h1>
    </div>
);

Installation

yarn add @ncpa0cpl/vanilla-jsx

Enable the JSX transform in your tsconfig.json:

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "@ncpa0cpl/vanilla-jsx"
    }
}

Set the same option in your bundler, e.g. for esbuild:

esbuild
  .build({
    jsxImportSource: "@ncpa0cpl/vanilla-jsx",
    ...rest
  })

Quick example

import { sig } from "@ncpa0cpl/vanilla-jsx/signals";

function getCounterComponent() {
    const counter = sig(0);

    return (
        <div>
            <button
                class={counter.derive(c => `counter_${c}`)}
                onClick={() => counter.dispatch(current => current + 1)}
            >
                Click me!
            </button>
            <p>{counter}</p>
        </div>
    );
}

The built-in signal library is optional — interops are provided for JS Signals, mini-signals and @preact/signals-core, and any other implementation can be plugged in via SignalsReg.

Documentation

| Document | Contents | | --- | --- | | Signals | The built-in signal library: sig, derive, combinators, batching, GC-based cleanup. | | Signal Freezing | Stopping signal driven DOM mutation in selected sub-trees. | | Working with JSX | Setup, elements, fragments, props, events, reactive attributes, class/style, boundSignal, unsafeHTML, components. | | Components | <If>, <Switch>/<Case>, <Range>, <VirtualList>, $component lifecycle, ClassComponent. | | Interop | Registering other signal implementations, swapping the DOM layer. | | Gotchas and limitations | Rendering model, GC cleanup rules, XSS notes, batching semantics, environment requirements. |

License

MIT