Kudzu
0.7.0JULY 2026

REACT-SOURCE MIGRATION PREVIEW

Bring React-shaped source.
Ship without React.

Kudzu can now ingest supported conventional React imports as migration source, pre-render complete HTML, and emit only the direct DOM behavior each route actually uses.

See how it worksBrowse the tag ↗
0 BStatic route JavaScript
0React runtime modules
310 msLanding fixture build median
01

THE NEW INPUT

Keep the shape.
Change the outcome.

import React, { useState } from "react"

export default function Header() {
  const [open, setOpen] = useState(false)

  return <React.Fragment>
    <button onClick={() => setOpen(!open)}>
      {open ? "Close" : "Menu"}
    </button>
    {open && <nav>Navigation</nav>}
  </React.Fragment>
}
INPUTReact-shaped TSX

Functions, props, fragments, named hooks, conditions, and ordinary event handlers.

↓
COMPILERKudzu specialization

Supported React imports become compile-time APIs. Components do not survive as a browser tree.

↓
OUTPUTHTML + needed ESM

Static routes ship no JavaScript. Interactive routes ship only their direct DOM capabilities.

02

WHAT LANDED

Migration primitives,
not a compatibility runtime.

IMPORTS

React source ingestion

Supported unaliased named hooks and default, namespace, or named Fragment imports compile without loading React.

COMPONENTS

Relative composition

Function components, props, children, nested conditions, and handlers retain their familiar TSX structure.

COLLECTIONS

Deeper list shapes

Analyzable selectors, positional keys, sibling child maps, nested rows, local state, refs, and effects specialize directly.

STATIC

Zero stays zero

Accepted React import syntax does not make a static route interactive or add a client runtime.

SAFETY

No surviving React

Generated modules are checked for runtime React references; side-effect imports fail with a source location.

BEHAVIOR

Capability-only ESM

State, attributes, conditional DOM, effects, and event handlers ship only when the route uses them.

CURRENT BOUNDARY

Source migration,
not React in disguise.

Aliased hooks, React.useState, memo, useMemo, useCallback, React classes, React Router, Next-specific components, and React UI packages remain unsupported.

A real migration should reduce its first blocker to a fixture, then extend the compiler one proven pattern at a time.

UPGRADE

Start with one route.

$npm install @kudzujs/core@^0.7.0

New Kudzu code should still import from @kudzujs/core. Retaining react imports is for migrations where minimizing source edits matters.