foldkit-react

Use React components inside a Foldkit view, and Foldkit programs inside a React app. Each side keeps its own renderer and its own state; they meet at a single DOM element, and only Messages and Ports cross it.

React inside Foldkit                     Foldkit inside React

Model ─▶ view ─▶ ReactComponent.view     <Counter step={2} onCount={…} />
                   │ props (a DOM prop)       │ props ─▶ inbound Ports
                   ▼                          ▼
          <foldkit-react-host>          <div> (React owns)
                   │ React root               │ Runtime.embed
                   ▼                          ▼
             React component              Foldkit program
                   │ event                    │ outbound Ports
                   ▼                          ▼
         Message ─▶ update                callback props

Who owns what#

• React inside Foldkit. The Foldkit Model owns every value it passes as a prop. React owns the component's internal state (useState, focus, a library's selection), which survives Foldkit renders. A React event never changes the Model directly: you map it to a Message and update decides.
• Foldkit inside React. The Foldkit program owns its Model. React props reach it only through the program's inbound Ports, and it reports back only through outbound Ports. There is no access to its Model from React.

Neither renderer ever touches the other's DOM subtree, so there is no second reconciler and no shared ownership to reason about.

Install#

pnpm add foldkit-react foldkit effect react react-dom

React 19 is required. examples/react runs both directions, plus codegen, as a pinned transcript.