Azoth

JSX, evaluated to actual DOM. The platform was already enough.

Azoth is a JSX framework where <p>hello</p> returns an actual HTMLParagraphElement. No virtual DOM. No reconciliation. No render cycle. JSX compiles to template-clone + property-assignment; what you build on top is plain DOM and plain JavaScript.

Status: active development. Used in production at Works Real Estate and adjacent projects. The repo is being organized for open-source release.

Start here

• Mental model: JSX as DOM — the foundational reframe
• For LLMs — terminology discipline and stop-and-ask triggers when working with Azoth via AI
• Workflow — UI-first methodology that emerged from production
• Coming from React — translation bridge for React developers
• Full topic index — all curated reference docs

For the longer reasoning trace (an LLM working through Azoth for the first time and corrected over many sessions), see docs/MENTAL-MODEL.md. The topic files in docs/topics/ are the curated surface; the mental-model document is the origin.

Packages

Package	Role	Status
azoth	Umbrella package; re-exports chronos, maya, vite-plugin	published
@azothjs/thoth	JSX compiler — extracts HTML, generates targets + bind + renderer	DOM target complete; HTML/SSR target in progress
@azothjs/maya	Runtime — compose, blocks, renderer, replay bindings	DOM complete; HTML target in progress
@azothjs/chronos	Async-to-DOM channels — promises, iterators, streams → layout deltas	beta
@azothjs/vite-plugin	Vite integration with .tsx support via esbuild pre-pass	published
jsonic	Streaming JSON parser (used by chronos)	alpha
valhalla	API-level integration tests; also serves as worked-example reference for LLMs	active, private

Projects

Project	Purpose
sandbox	Developer scratchpad
test-utils	Common test helpers
vite-test	End-to-end Vite pipeline smoke test
docs	Vitepress documentation site

Install

npm install azoth
# or
pnpm add azoth

Then configure Vite (vite.config.js):

import { defineConfig } from 'vite';
import azoth from '@azothjs/vite-plugin';

export default defineConfig({
    plugins: [azoth()]
});

.jsx and .tsx files in your project are handled automatically. See build and integration for details.

A quick taste

import { channel } from '@azothjs/chronos/channels';

const Greeting = ({ name }) => <p>Hello, {name}!</p>;

const App = () => (
    <main>
        <Greeting name="world" />
        <ul>{fetchItems().then(items =>
            items.map(i => <li>{i.title}</li>)
        )}</ul>
    </main>
);

document.body.append(<App />);

That's the whole shape: components return DOM, async values go directly into {…} slots, the DOM is what changes. See components, composition, and async and channels for the full model.

Status and roadmap

Active development. Multiple production deployments. The OSS release work in progress includes:

• Documentation reorganization (current — this docs/topics/ directory is the result)
• API stabilization (some renames pending — see TODO.md)
• HTML/SSR target completion (Thoth + Maya have the abstraction; the HTML renderer is being filled in)
• Channel API consolidation

See TODO.md for the in-flight list.

License

MIT — see LICENSE.