Code Generation

Code Generation

IC Reactor supports three declaration-generation paths.

1. Vite Plugin

Recommended for Vite apps.

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { icReactor } from "@ic-reactor/vite-plugin"

export default defineConfig({
  plugins: [
    react(),
    icReactor({
      canisters: [{ name: "backend", didFile: "./backend/backend.did" }],
    }),
  ],
})

Why use it:

• automatic regeneration on .did changes
• local ic_env cookie injection through icp-cli
• best development loop for Vite apps

2. CLI

Recommended for non-Vite apps, CI, or explicit generation workflows.

pnpm exec ic-reactor init
pnpm exec ic-reactor generate

The CLI creates an ic-reactor.json config and generates declarations plus a typed index.ts entrypoint per canister.

3. Manual or Existing Generators

If your project already uses dfx generate or @icp-sdk/bindgen, you can keep that flow and use the resulting declarations with Reactor or createActorHooks(...).

Typical Output

Depending on the generator, you will usually get:

• an IDL factory module
• a *.did.d.ts service type file
• optionally an IC Reactor-generated index.ts entrypoint with typed hooks

Choosing Between Them

• Vite app: use the Vite plugin
• Next.js or explicit pipeline: use the CLI or your existing manual generator
• custom generation tooling: use @ic-reactor/codegen