Udodi

Build reactive interfaces without the framework weight.

Udodi is a lightweight, zero-dependency JavaScript UI framework with a focused API and built-in application primitives.

Get Started
View on GitHub
Udodi reactive interface architecture

Udodi is designed around a simple idea: application code should describe state, behavior, and interfaces without forcing developers to manage unnecessary framework machinery.

js
import { effect, reactive } from "udodi";

const state = reactive(
  { count: 0 },
  {
    interceptors: {
	  // Keep count non-negative.
      count(value) {
        return Math.max(0, value);
      },
    },
  }
);

effect(() => {
  element.textContent = state.count;
});

// Fine-grained update
state.count++;

Fine-grained updates that stay fast

Udodi tracks dependencies where reactive data is read, so changes update only the effects and interface parts that depend on that state, instead of broad component re-renders.

Reactive state can also use interceptors to control or transform assignments before values are applied, keeping state rules close to the data itself. The result is a predictable reactive model with precise updates and minimal framework overhead.

Learn more →

js
import { createComponent, html } from "udodi";

export const Basic = createComponent({
  state() {
    return { count: 0 };
  },

  computed: {
    double(ctx) {
      return ctx.count * 2;
    },
  },

  methods: {
    increment() {
      this.count++;
    },
  },

  template: html`
    <button @on="click=increment">
      <span @text="double"></span>
    </button>
  `,
});

A focused API you can hold in your head

Components keep state, behavior, and templates together, while a small directive set connects them to the DOM. You describe the interface; Udodi handles the reactive wiring without adding unnecessary machinery.

The result is a component model that stays small enough to reason about in full, yet complete enough to build real interfaces without reaching for unnecessary extra libraries or hidden runtime layers.

Learn more →

js
import { createQueryPool } from "udodi";

const pool = createQueryPool({
  worker: {
    enabled: true,
    computeWorkers: 2,
  },
});

pool.registerModule("processBuffer", {
  url: new URL("./workers/process-buffer.js", import.meta.url).href,
});

const processed = pool.query("processed", {
  module: "processBuffer",
});

await processed.fetch({
  input: arrayBuffer,
  transfer: true,
});

// Result is available reactively
// through processed.data

Asynchronous data and worker execution without the bulk

Query Pool manages asynchronous queries, mutations, caching, invalidation, and request state while keeping server data isolated from your component and template model.

For expensive work, queries can execute modules in Web Workers, keeping CPU-intensive tasks off the UI thread. Results return through reactive query state, and large payloads can be transferred without unnecessary copying.

Learn more →

Built for the parts that matter.

A small reactive core combined with the primitives needed to build real interfaces.

Fine-Grained Reactivity

Track dependencies where changes occur and update only the affected parts of the interface.

Explore Reactivity →

Declarative Templates

Build interfaces with HTML and a small, predictable directive DSL.

Explore Templates →

Component Architecture

Organize state, behavior, lifecycle, templates, and styles around reusable component boundaries.

Explore Components →

Start with the essentials.

Whether you are evaluating Udodi or building your first application, these guides provide the quickest path into the framework.

01

Installation

Install Udodi and learn about the available distribution formats.

02

Quick Start

Build a small reactive application and see the core workflow in practice.

03

Your First Component

Understand how state, behavior, templates, and styles work together.

04

Project Structure

Learn how to organize an Udodi application as it grows.

Explore the framework.

Move from the reactive core to application-level primitives and then into the runtime architecture.

Core

The foundation of every Udodi application.

  • Fundamentals Components, state, methods, computed values, watchers, lifecycle, props, context, and styles.
  • Templates and DirectivesBuild reactive interfaces with Udodi's declarative template DSL.
  • Reactivity Signals, effects, reactive state, collections, and touch function.

Application

Built-in primitives for common application concerns.

  • Forms and ValidationManage form state, fields, validation, and submission.
  • Udodi Store Manage shared reactive state and persistent application data.
  • Query Pool Manage asynchronous data, mutations, caching, invalidation, and worker execution.
  • OverlayBuild modals, dialogs, and layered interfaces.

Advanced

Understand the runtime beneath the API.

  • ArchitectureExplore how Udodi is structured internally.
  • DOM RenderingLearn how Udodi renders and updates interfaces.
  • PerformanceExplore reproducible benchmarks and published results.

API Reference

ComponentReactivityFormsStoreQuery PoolOverlayUtilities

Guides for learning. Reference for precision.

Start with the guides when learning Udodi. Move to the API reference when you need exact details about a specific capability.

Browse API ReferenceView Performance