Udodi

Udodi Documentation ​

Udodi is a lightweight, dependency-free JavaScript UI framework built around fine-grained reactivity, declarative templates, and a minimal developer-facing API.

It is designed for developers who want the simplicity of a small JavaScript library without giving up the capabilities needed to build real applications.

Udodi brings together the core building blocks needed to build modern web applications:

  • Fine-grained reactivity
  • Declarative HTML templates
  • Component-based architecture
  • Reactive state management
  • Component-scoped styling
  • Persistent stores
  • Asynchronous query management
  • Form state and validation
  • Application overlays and modals

The goal is simple: give you the primitives to build reactive interfaces and applications without forcing your application into a large framework architecture.

Get Started ​

If you are new to Udodi, start here.

GuideDescription
InstallationInstall Udodi and learn the available distribution formats.
Quick StartBuild your first reactive Udodi application.
Your First ComponentLearn the basic structure of an Udodi component and how state, methods, computed values, watchers, interceptors, templates, and component styles work together.
Project StructureLearn how to organize an Udodi application as it grows.

Learn Udodi ​

Fundamentals ​

Understand the building blocks that make up an Udodi application.

  • Components — Define reusable UI and application logic.
  • State — Manage reactive component state.
  • Methods — Encapsulate application behavior.
  • Computed Values — Derive reactive values from state.
  • Watchers — Observe reactive dependencies and respond to changes.
  • Interceptors — Intercept state writes and runtime operations.
  • Lifecycle — Work with component creation, mounting, and cleanup.
  • Props — Pass data between components (including live bindings with bindProp).
  • Context — Understand the context available to components and directives.
  • Component Styles — Define styles through a component's style property with CSS scoping.

Start here → Fundamentals

Templates and Directives ​

Udodi templates use a small declarative DSL designed to keep templates readable and predictable.

Learn how to express UI structure, bind reactive data, respond to events, conditionally render content, render lists, control element attributes and styling, and register element refs.

Guides

Form-oriented directives such as @form, @validate, and @submit are covered under Forms.

Start here → Templates

Forms and Validation ​

Udodi provides a form system for managing form state, field state, validation, and submission.

The form system supports both synchronous and asynchronous validation, with flexible validation modes for different application requirements.

Guides

Start here → Forms

Udodi Store ​

Udodi Store provides a simple way to manage reactive application state outside individual components.

Stores can be registered and shared across an application, allowing state to be organized independently from the components that consume it. Stores can optionally be persisted when application state needs to survive page reloads or application restarts.

The Store system covers three core areas:

  • Store — Create and manage reactive application state.
  • Registry — Register and access shared stores across an application.
  • Persistence — Persist store state when needed.

Guides

Start here → Udodi Store

Query Pool ​

Udodi's Query Pool provides a reactive runtime for asynchronous data and mutations. It coordinates queries, mutations, dependencies, in-flight deduplication, caching, invalidation, cancellation, and optional worker execution while keeping query state synchronized with the UI.

Queries expose reactive state such as data, loading, error, and status, allowing components to react directly to asynchronous execution without manually coordinating request state.

Guides

Start here → Query Pool

Overlay ​

Udodi includes a built-in Overlay system for managing modal, dialog, and other layered UI experiences through openModal, and closeTopModal.

openModal returns a Promise that resolves with the value provided when the overlay closes, making it straightforward to coordinate overlay interactions with application logic.

The runtime manages the interaction details required for a robust overlay experience, including:

  • Backdrop handling
  • Escape-to-close behavior
  • Scroll locking
  • Focus trapping
  • Focus restoration
  • Overlay stacking and z-index management
  • Optional host className and zIndex configuration

The Overlay system is part of Udodi's core runtime and is designed to handle common modal and dialog requirements without requiring an additional UI library.

Guides

Start here → Overlay

Reactivity ​

Udodi's component, template, store, and query systems are built on a fine-grained reactivity system.

Most application code can use Udodi's higher-level APIs without interacting directly with the underlying reactive primitives. The Reactivity guides explain those primitives when you need finer control, want to build reusable extensions or libraries, or want to understand how Udodi's reactive system works internally.

Guides

Start here → Reactivity

Advanced Topics ​

Once you are comfortable with the fundamentals, explore Udodi's architecture, rendering model, performance characteristics, and advanced integration patterns.

These guides go beyond the everyday API to explain how Udodi works, why it behaves the way it does, and how to use it effectively in more demanding applications.

API Reference ​

Use the API reference when you already know what you need and want precise details about a specific API.

The API reference should be treated as the authoritative reference for function signatures, options, return values, and behavior.

Contributing ​

Udodi is open source, and contributions are welcome.

If you want to contribute to the framework itself, start with:

You can also visit the Udodi GitHub repository to browse the source code, report issues, and contribute improvements.

Documentation Map ​

Use this map to find the documentation for the part of Udodi you want to learn or use.

SectionPurpose
Getting StartedInstall Udodi and build your first application
FundamentalsLearn components, state, methods, computed values, watchers, interceptors, lifecycle, and component styles
ReactivityUnderstand Udodi's fine-grained reactive system and its core reactivity primitives
TemplatesLearn Udodi's declarative template DSL, directives, DOM references, and template composition
FormsBuild forms and manage form state, validation, and submission
Udodi StoreManage shared, reactive, namespaced, and persistent application state
Query PoolManage asynchronous data and mutations with caching, dependencies, invalidation, cancellation, and optional worker execution
OverlayBuild modals, dialogs, and layered UI with managed lifecycles, stacking, focus handling, and interaction behavior
AdvancedExplore Udodi's architecture, CSS scoping, performance, and advanced runtime behavior
API ReferenceFind precise documentation for the public API
ContributingLearn how to develop, test, and contribute to Udodi itself

Where Should I Start? ​

Use the guide below to jump directly to the part of Udodi that matches what you want to build or understand.

I want to…Go here
Get started with UdodiQuick Start
Understand Udodi's reactivity modelReactivity Overview
Build a UI with templates and directivesTemplates and Directives
Reference a DOM element from a component@ref
Build and validate formsForms Overview
Manage shared application stateUdodi Store
Manage asynchronous data and mutationsQuery Pool
Build modals, dialogs, and layered UIOverlay
Style a componentComponent Styles & CSS Scoping
Understand Udodi's internal architectureArchitecture Guide
Look up exact API detailsAPI Reference
Contribute to UdodiContributing Guide

Udodi
Build reactive interfaces with less framework overhead.

GitHub · Issues · Discussions