82 first-party bindings

Bindings

Keep the APIs you know across state, data, routing, UI, forms, charts, 3D, and more. Each binding replaces a library’s React-facing layer with one built for Octane.

Pick by the job

Moving an existing app? Start with the libraries it already uses. Starting fresh? Pick the group that matches the problem, then learn the library itself from its upstream documentation. The directory covers every first-party binding in the repository.

Shared state

9 bindings

Small stores, atoms, observable state, Redux, RTK Query, and TanStack Store.

AI, data, and routing

12 bindings

Streaming AI, GraphQL, server state, live IndexedDB data, type-safe routes, and React Router-style APIs.

Web3

3 bindings

Wallet connection, chain state, contract reads, signing, and transactions.

UI and interaction

29 bindings

Primitives, browser hooks, positioning, motion, drag and drop, toasts, command menus, icons, keyboard shortcuts, and event pacing.

Forms and content

13 bindings

Forms, file acquisition, rich-text editing, streaming Markdown, MDX, and translations.

Data-heavy screens

6 bindings

Tables, large virtual lists, charts, and visualization primitives.

Web 3D

2 bindings

Technical-preview, React Three Fiber-style scene graphs on Octane's universal renderer.

Terminal UI

1 binding

Ink components, Yoga layout, input handling, and interactive ANSI terminal rendering.

Desktop

2 bindings

Tauri v2 and Electron desktop bindings for Octane applications.

Styling, tests, and devtools

5 bindings

Compiled StyleX, runtime styled-components, DOM-first component tests, and the TanStack Devtools panel.

Maturity ranges from complete ports to scoped, partial, and technical-preview bindings. Follow each package link for its README, then use the status table below for the exact supported surface and SSR coverage.

Install it, then change the import

Install the Octane package instead of the React-facing one:

pnpm add @octanejs/zustand

The library API stays familiar; the import points at its Octane binding:

ts
// React
import { create } from 'zustand';

// Octane
import { create } from '@octanejs/zustand';

From there, use Zustand's store and selector APIs as usual. The same pattern applies to the other bindings: upstream docs teach the library, while the package README records anything Octane-specific.

Check the part you plan to use

Octane and its bindings are alpha software. Before building around one, check three things:

  1. Is the hook or component you need included?
  2. Does a known difference affect your code?
  3. If you render on the server, is SSR and hydration covered?

The generated bindings status table answers those questions for all 82 first-party bindings and is checked in CI.