Skip to content
Domphy

This is a component

No JSX, no compiler — a plain object plus patches, reactive out of the box:

import { toState } from "@domphy/core"
import { button, heading } from "@domphy/ui"

const count = toState(0)

const App = {
  div: [
    { h3: (l) => `Count: ${count.get(l)}`, $: [heading()] },
    { button: "Increment", onClick: () => count.set(count.get() + 1), $: [button({ color: "primary" })] },
    { button: "Reset", onClick: () => count.set(0), $: [button()] },
  ],
}

Live, right here on the page:

Packages

PackageDescription
@domphy/coreRuntime — elements, reactivity, lifecycle, SSR
@domphy/themeDesign tokens — color, spacing, size, dark mode
@domphy/ui98 UI patches — button, dialog, table, form controls…
@domphy/appApp layer — file-based routing, layouts, SSR, lazy routes
@domphy/queryAsync data fetching, caching, mutations, infinite queries
@domphy/routerType-safe client-side router with search params and loaders
@domphy/tableHeadless table — sorting, filtering, pagination, grouping
@domphy/virtualVirtualization — lists, grids, masonry, infinite scroll
@domphy/formForm state, validation, field arrays, async submission
@domphy/dndDrag and drop — sortable lists, multi-container, multi-drag
@domphy/blocks173 composed blocks — sidebars, auth pages, dashboards, effects
@domphy/chartSVG + WebGL charts — line, bar, pie, scatter, gauge…
@domphy/threeDeclarative three.js scene graph on Domphy reactivity
@domphy/editorRich-text editor — Tiptap-compatible API, self-contained engine
@domphy/floatingAnchor positioning — floating-ui core, zero-dep, powers overlays
@domphy/pressSSG docs engine — markdown, search, islands, routing
@domphy/i18ni18next wrapper with reactive t(listener, key)
@domphy/doctorStatic analyzer — flags non-idiomatic code, auto-fixes
@domphy/mcpMCP server — 10 tools for AI agents to explore the framework
create-domphyScaffolder — npm create domphy@latest Vite + TS starter

Installation

npm install @domphy/ui @domphy/core @domphy/theme
<script src="https://unpkg.com/@domphy/ui/dist/core-theme-ui.global.js"></script>