Reactra

Write what the screen is. The compiler writes the part where the bugs live.

It compiles to React you already read

Reactra is not a runtime framework. The DSL compiles at build time to standard React 19 APIs — React.use, useTransition, useSyncExternalStore — with no per-component framework runtime. The router, store, resource, and DI layers are ordinary opt-in libraries. Every emitted file is React a React developer can read.

Compiler-first

Compiles to ordinary React 19. Zero runtime framework, no VDOM swap, no proxies. Eject any time — the output is your repo.

Explicit

Every reactive binding, every lifecycle event, every cross-cutting wrap is named in source. No hidden behavior.

Fine-grained

derived, resource, and per-field store subscriptions — re-render only what actually changed.

Observable

Time-travel devtools, uses replayable, and uses undoable are built in — they read and re-drive real component and store state.

The 80% surface, in one component

export component Counter {
  state count: number = 0
  derived label = count === 1 ? "1 click" : `${count} clicks`
  action inc() { count = count + 1 }
  view {
    <button type="button" onClick={inc}>{label}</button>
  }
}

import { useCallback, useEffect, useMemo, useState } from "react"

export const Counter = () => {
  const [count, setCount] = useState((0) as number)
  const label = useMemo(() => count === 1 ? "1 click" : `${count} clicks`, [count])
  const inc = useCallback(() => { setCount(prev => prev + 1) }, [])
  useEffect(() => { const h = globalThis.__REACTRA_TEST__; if (h) h.update("Counter", { count, label, inc }) })
  return (<>
    <button type="button" onClick={inc}>{label}</button>
  </>)
}
export default Counter

That’s state, derived, action, and view — the four keywords most pages need. See the full keyword surface for the other 21.