React createRoot

Attach a React tree to the Cascade renderer.

createRoot

To use Cascade with React, first create a renderer and then call createRoot(renderer).render(<App />). The React reconciler will translate your JSX tree into Cascade renderables and manage updates.

import { createCliRenderer } from "@cascadetui/core"
import { createRoot } from "@cascadetui/react"

const renderer = await createCliRenderer()
createRoot(renderer).render(<App />)

API	Signature	Description
`createRoot`	`(renderer: CliRenderer) => Root`	Creates a React root bound to a specific Cascade renderer instance.
`root.render`	`(node: ReactNode) => void`	Mounts (or updates) the React tree. Calling it again replaces the rendered tree.
`root.unmount`	`() => void`	Unmounts the tree and frees React resources. Also triggered automatically on `renderer.destroy()`.

The returned root also exposes unmount(). The tree is automatically cleaned up when renderer.destroy() is called, but explicit unmount can be useful in tests or when embedding Cascade into a larger process.

const renderer = await createCliRenderer()
const root = createRoot(renderer)

root.render(<App />)

// Later
root.unmount()
renderer.destroy()

Under the hood, the React binding attaches the animation engine to the renderer and wraps your app in an error boundary that forwards crashes to renderer.reportCrash (so you can inspect diagnostics in the console overlay).

Portals and synchronous flushing

The React binding also re-exports createPortal and flushSync from the internal reconciler integration. Use portals when you want to render a subtree into a different parent/container, and flushSync when you need a synchronous commit (usually only for edge cases).

import { createPortal, flushSync } from "@cascadetui/react"

// Example: force synchronous update (use sparingly)
flushSync(() => {
  // setState(...) etc
})

// Example: portals depend on your container/host integration
// (advanced usage; most apps do not need portals)

In most applications you can ignore both. Prefer normal React composition and state updates.

TypeScript / JSX configuration

For best type inference and JSX tag support, set jsxImportSource to @cascadetui/react in your app tsconfig.json.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@cascadetui/react",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "bundler",
    "strict": true
  }
}

If you don’t set jsxImportSource, you can still use the binding, but you may lose typing on intrinsic elements like <box /> and <text />.