Nix.js

A lightweight, fully reactive micro-framework for building modern web UIs — no virtual DOM, no compiler, no build-time magic. Just signals, tagged templates, and pure TypeScript.

→ Documentation & Live Demo

~24 KB minified · ~10 KB gzipped · zero dependencies · TypeScript-first · ES2022

Installation

npm install @deijose/nix-js

Subpath Imports (Tree-Shaking)

When you only need one module, import from subpaths:

import { signal, effect } from "@deijose/nix-js/signals";
import { createRouter } from "@deijose/nix-js/router";
import { createStore } from "@deijose/nix-js/store";
import { createForm } from "@deijose/nix-js/form";
import { suspend, lazy } from "@deijose/nix-js/async";
import { html, repeat, transition } from "@deijose/nix-js/template";
import { mount } from "@deijose/nix-js/component";
import { NixComponent } from "@deijose/nix-js/lifecycle";
import { provide, inject, createInjectionKey } from "@deijose/nix-js/context";
import { enableDevTools } from "@deijose/nix-js/devtools";

This is optional: import { ... } from "@deijose/nix-js" remains fully supported.

Quick Start

import { signal, html, NixTemplate, NixComponent, mount, createRouter, RouterView, Link, nixRouter } from "@deijose/nix-js";

// --- Pages as function components (NixTemplate) ---
// Plain functions returning html`` are recommended for pages and
// display-only components — no class needed, signals just work.

function HomePage(): NixTemplate {
  const count = signal(0);
  return html`
    <h1>Home</h1>
    <p>Count: ${() => count.value}</p>
    <button @click=${() => count.value++}>+1</button>
  `;
}

function UserPage(): NixTemplate {
  const router = nixRouter();
  return html`<h1>User: ${() => router.params.value.id}</h1>`;
}

// --- Stateful component as class component (NixComponent) ---
// Use a class when you need lifecycle hooks: onInit / onMount / onUnmount.

class Clock extends NixComponent {
  private time = signal(new Date().toLocaleTimeString());
  private _id = 0;

  onMount() {
    this._id = setInterval(() => {
      this.time.value = new Date().toLocaleTimeString();
    }, 1000);
    return () => clearInterval(this._id); // auto-cleanup on unmount
  }

  render() {
    return html`<p>Clock: ${() => this.time.value}</p>`;
  }
}

// --- Router ---

const router = createRouter([
  { path: "/",         component: () => HomePage() },
  { path: "/user/:id", component: () => UserPage() },
]);

// --- App shell (function component) ---

function App(): NixTemplate {
  return html`
    <nav>${new Link("/", "Home")} ${new Link("/user/42", "User 42")}</nav>
    ${new Clock()}
    ${new RouterView()}
  `;
}

mount(App(), "#app", { router });

What's Included

Everything ships in a single zero-dependency import:

| Category | APIs | |---|---| | Reactivity | signal, computed, effect, batch, watch, untrack, nextTick | | Templates | html` `, repeat, ref, portal, transition, showWhen | | Components | NixTemplate (function components), NixComponent (lifecycle class), mount, children & named slots | | Router | createRouter, RouterView, Link, nixRouter, RouterKey, guards, nested routes, named routes (name + navigate({ name })), mount(..., { router }) | | Forms | nixField, createForm, built-in validators, Zod/Valibot interop | | State | createStore, provide, inject, createInjectionKey | | Async | suspend (with invalidate for re-fetching), lazy | | Error handling | createErrorBoundary |

Documentation

Query Package

createQuery and query cache utilities now live in @deijose/nix-query.

npm install @deijose/nix-query

Full API reference, guides, and examples:

→ github.com/DeijoseDevelop/nix-js

License

MIT