Reactive by default
Fine-grained reactivity withsignal(),computed(), and effect(). No virtual DOM.
Dathra
Dathra is a web framework built aroundWeb Components, Signals, and server-rendered Declarative Shadow DOM. It is designed for apps that want framework-level ergonomics without giving up the platform primitives that browsers already understand.
These docs are also a Dathra app: the shell is a custom element rendered on the server with @dathra/core/ssr, hydrated on the client with @dathra/core/hydration, and styled inside Shadow DOM.
Start Here
Choose the rendering path first. CSR is the fastest way to try Dathra in a browser-only app. SSR adds server-rendered Declarative Shadow DOM, request state, and hydration.
Web Components
Define custom elements with Shadow DOM, reactive props, and Declarative Shadow DOM output for SSR.
SSR + Hydration
Server-side render with islands architecture, progressive hydration, and interaction replay.
Atomic Store
Recoil/Jotai-inspired atom-based state management with store boundaries and AsyncLocalStorage support.
JSX Compiler
Custom JSX/TSX transformer (oxc-parser + esrap) with CSR and SSR code generation modes.
Build Plugins
Vite, Webpack, Rollup, and esbuild plugins via unplugin.
When to Use Dathra
- You want components that ship as standard custom elements instead of framework-private component instances.
- You want fine-grained updates through signals rather than virtual DOM re-rendering.
- You need SSR output that preserves Shadow DOM boundaries through Declarative Shadow DOM.
- You want islands-style hydration for interactive parts of an otherwise server-rendered page.
Recommended Reading Order
- ReadGetting Startedto choose between CSR and SSR.
- LearnReactivitybefore writing component state.
- ReadComponentsto define custom elements and props.
- Use theAPI Referencewhen you need exact signatures.
Architecture
Dathra is organized as a monorepo with eight packages:
- @dathra/reactivity— Core signals, computed, effects, batching, root lifecycle
- @dathra/components—
defineComponent(), CSS helpers, registry, SSR rendering for Web Components - @dathra/runtime— DOM manipulation, SSR rendering primitives, hydration engine, reconciliation
- @dathra/store— Atomic state management with
atom(),createAtomStore(),withStore() - @dathra/transformer— JSX/TSX compiler (CSR + SSR modes)
- @dathra/plugin— Build tool plugins (Vite, Webpack, Rollup, esbuild)
- @dathra/shared— Shared utilities (typed entries/fromEntries, string case conversion, islands contract)
- @dathra/core— Aggregator package re-exporting all public APIs