Domphy

A Patch-based UI. Native elements, no components.

Master 5 functions and you can build anything — toState, merge, themeColor, themeSize, themeSpacing.

Domphy removes component boundaries, unifies SSR and CSR under one model, automates context-aware styling, and works with any JavaScript library — no adapters or plugins.

Why Domphy

From the author:

I published Domphy in February 2026, at 41 years old. I spent 10 years as a structural architect and 6 years teaching myself to code (2 years with js/ts). Every time I tried to learn React or Vue, something felt wrong — logic scattered between data and UI, too many abstractions, too many plugins just to ship a feature. So I built what I wished existed.

I introduce Patch-based UI Architecture, a paradigm for composing web interfaces distinct from component-based, directive-based, and mixin-based approaches. A Patch is formally defined as a function returning a PartialElement — a composable, stateless descriptor that augments a host element's behavior without wrapping, replacing, or owning it. Unlike existing composition models, a Patch carries no rendering lifecycle, holds no state, and creates no DOM boundary.

Research papers:

• Compositional Atomic Reactive Mapping Model
• Relative Unitization Design Systems

Installation

NPM

npm install @domphy/ui

CDN

<script src="https://unpkg.com/@domphy/ui/dist/index.global.js"></script>

Quick Start

import { toState, type DomphyElement } from "@domphy/core";

// Create a State instance
const count = toState(0);

const text: DomphyElement<"p"> = {
  // Reactive values can be reactive functions.
  // Reading state with `count.get(listener)` also add listener to state. 
  // State change => call listener => re render property
  p: (listener) => `Count: ${count.get(listener)}`
};

const button: DomphyElement<"button"> = {
  button: "Increment",
  onClick: () => count.set(count.get() + 1),

  // Standard Nested CSS nesting
  style: {
    padding: "4px 16px",
    backgroundColor: "#0f62fe",
    borderRadius: "6px",
    color: "#ffffff",
    "&:hover": {
      backgroundColor: "#4589ff"
    }
  }
};

const App: DomphyElement<"div"> = {
  div: [text, button]
};

export default App;

Docs

Core	Rendering, reactivity, SSR, patches, lifecycle hooks
Theme	Context-aware color, size, and spacing
UI	~60 ready-to-use patches
Integrations	i18next, TanStack Query, SortableJS, and more