Kudzu: Compiling React-shaped TSX to Static HTML Without Hydration

React-shaped TSX is a familiar way to describe user interfaces, but deploying it usually involves shipping a JavaScript runtime, hydration, or a client-side component tree.

I have been experimenting with a different approach through an open-source project called Kudzu.

Kudzu compiles a statically analyzable subset of React-shaped TypeScript and TSX into complete static HTML, CSS, and only the route-specific ESM capabilities actually used.

A small example

import { useState } from "@kudzujs/core"

export default function HomePage() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Grown {count} times
    </button>
  )
}

The component executes during the build. It does not survive as a browser component.

Kudzu generates the initial HTML and lowers the state update into direct browser behavior. State setters update logical state synchronously, while DOM writes are batched at the end of the synchronous turn.

Static routes ship no JavaScript

When a route does not use browser interaction, Kudzu emits HTML and CSS without a client-side JavaScript runtime.

Interactive routes include only the capabilities they use, such as state bindings, event handlers, effects, keyed collections, or runtime URL parameters.

There is no React runtime, hydration pass, virtual DOM, or retained browser component tree.

This is not full React compatibility

Kudzu accepts only patterns that it can analyze and lower safely.

Supported patterns include function components, props, children, state, effects, conditions, keyed collections, refs, and selected React Router migration patterns.

Unsupported nearby patterns fail during the build with a source location and actionable diagnostic instead of silently falling back to React.

The project is experimental, and the supported TSX surface may change.

Why build it?

The goal is to explore whether ordinary React-shaped applications can be migrated to static deployment artifacts without forcing developers to rewrite declarative components as imperative DOM code.

Build-known work stays at build time. Browser code is generated only when the browser is the only place where the required value or interaction exists.

Try it

Documentation and demos: https://kudzujs.cloud

Source code: https://github.com/kudzujs/kudzu

npm: https://www.npmjs.com/package/@kudzujs/core

I would appreciate feedback on the compiler boundaries, generated runtime model, and ordinary React patterns that would be most valuable to support next.