Frond is two packages. Install them, create a runtime, and hand it to React.

What you’ll install

@frondruntime/core — the runtime, drivers, lifecycle, errors, diagnostics. Required.
@frondruntime/react — <FrondProvider>, useNode, useNodes, useNodeState, Preload. Required only if you render with React.

Install Frond with its peer runtime packages. Effect powers Frond execution and must be v4-compatible. MobX powers node observation and must be shared with app code. React apps also install mobx-react-lite because Frond’s React examples and MobX-backed node reads use observer.

Install

bun add @frondruntime/core @frondruntime/react effect mobx mobx-react-lite

Or with npm / pnpm / yarn — whichever your project uses.

If you’re not using React (CLI tool, headless service, background worker), drop @frondruntime/react.

Requirements

Node 20.19+ (or 22.12+) or Bun 1+
React 18+ when using @frondruntime/react
TypeScript with strict on. Frond’s types lean on strictFunctionTypes and exactOptionalPropertyTypes to preserve lifecycle type contracts. If you have these off, the API still works, but you’ll lose some of the safety the runtime is built around.

{
  "compilerOptions": {
    "strict": true,
    "exactOptionalPropertyTypes": true,
    "strictFunctionTypes": true
  }
}

Create a runtime

The runtime is the root of your graph. Create one per app (tests use a harness instead; see Testing).

// src/runtime.ts
import * as Frond from "@frondruntime/core";

export const runtime = Frond.createRuntime();

The runtime is created. It holds no nodes until one is requested.

Hand it to React

If you’re rendering React, mount FrondProvider at the root and pass the runtime in.

// src/App.tsx
import * as FrondReact from "@frondruntime/react";
import { runtime } from "./runtime";
import { Routes } from "./routes";

export function App() {
  return (
    <FrondReact.FrondProvider runtime={runtime}>
      <Routes />
    </FrondReact.FrondProvider>
  );
}

Every component below the provider can read nodes.

Imports

Two namespaces, one each.

import * as Frond from "@frondruntime/core";
import * as FrondReact from "@frondruntime/react";

Testing helpers live on the /testing subpaths:

import * as FrondTest from "@frondruntime/core/testing";
import * as FrondReactTest from "@frondruntime/react/testing";

Don’t import from internal source paths. They’re not public API and will move.

Next: define your first node and read it.