# Octane

> A compiler-first JavaScript UI framework and successor to Inferno that brings React's hooks, Suspense, and actions to a no-virtual-DOM architecture with automatic dependency tracking.

Octane is an open-source JavaScript UI framework created by Dominic Gannaway — also the creator of Inferno and a contributor to React, Lexical, Ripple, and Svelte. It carries Inferno's performance-first goal forward by compiling React-compatible components into direct DOM operations, eliminating the virtual DOM and manual dependency arrays. The project is currently in alpha, with its runtime, compiler, and SSR/hydration paths functional but APIs still subject to change.

## What It Is

Octane is a compiler-first UI framework that lets developers write components using the React API they already know — `useState`, `useEffect`, `memo`, context, portals, Suspense, transitions — while a compiler transforms them into direct DOM code before they ship. It introduces TSRX (`.tsrx`), a new file dialect that extends TypeScript/JSX with template directives (`@if`, `@for`, `@switch`, `@try`) and an `@{ … }` shorthand body syntax. Standard `.tsx` and `.jsx` files also work, and both dialects can coexist in the same app.

## How the Compiler Changes the Rules

The compiler is the central architectural bet Octane makes. Instead of tracking hook call order at runtime, it tracks hooks by call site, which means:

- **No rules of hooks** — hooks can live inside `if` blocks or after early returns without violating any constraint.
- **No dependency arrays** — `useEffect`, `useMemo`, and `useCallback` closures have their dependencies inferred automatically from what they capture; explicit arrays still work and mean exactly what they mean in React.
- **No virtual DOM** — templates compile to cloned DOM nodes with direct updates; keyed list reconciliation uses an LIS-based algorithm that moves only the nodes that need to move.

The one remaining constraint — that hooks cannot appear in plain JS loops — is enforced as a compile error, with the `@for` directive as the keyed alternative.

## Ecosystem and Bindings

The repository is a pnpm monorepo. The `octane` package bundles the runtime and compiler together. Around it, the project ships 53 first-party bindings under `@octanejs/*`, porting the React ecosystem to Octane:

- **State**: zustand, jotai, valtio, mobx, redux, redux-toolkit, tanstack-store
- **Data and routing**: tanstack-query, apollo-client, tanstack-router, remix-router
- **UI**: radix, base-ui, aria, shadcn, motion, dnd-kit, sonner, floating-ui, lucide
- **Forms and content**: hook-form, tanstack-form, lexical, tiptap, mdx, i18next
- **Data-heavy screens**: tanstack-table, tanstack-virtual, recharts, visx
- **3D and Web3**: three (React Three Fiber port), wagmi, rainbowkit

Build tool integrations cover Vite (`@octanejs/vite-plugin`), Rspack (`@octanejs/rspack-plugin`), and Rsbuild (`@octanejs/rsbuild-plugin`). Framework integrations exist for Astro, Docusaurus, and TanStack Start. Deployment adapters target Vercel and Cloudflare.

## Incremental Migration Path

Octane is designed to be adopted one component at a time inside an existing React 19 app. `OctaneCompat` lets a React 19 app render compiled Octane components as islands: native events stay delegated inside each island, Octane components can read React context via `use()`, and SSR plus hydration carry over. React Server Components are the one exception that does not transfer.

## Current Status: Alpha

The GitHub repository lists the project's status as alpha. The core behavioral test suite contains over 3,900 distinct cases spanning conformance, differential, hydration, runtime, compiler, and SSR coverage, with React-derived parity tracked case by case in a generated coverage ledger. The latest release at the time of indexing was `@octanejs/tanstack-virtual@0.1.22`, published in August 2026. The project is MIT-licensed and the documentation site is itself built with Octane (TSRX).

## Features
- Compiler-first architecture with no virtual DOM
- TSRX dialect with @if, @for, @switch, @try directives
- Automatic dependency inference for useEffect, useMemo, useCallback
- No rules of hooks — hooks allowed inside conditions and after early returns
- React API compatibility: useState, useEffect, memo, context, portals, Suspense, transitions
- Parallel async with independent use() calls starting simultaneously
- Streaming SSR with out-of-order Suspense flushing
- Deferred hydration via <Hydrate> component
- OctaneCompat for incremental migration from React 19
- 53 first-party ecosystem bindings (@octanejs/*)
- LIS-based keyed list reconciler
- Byte-stable hydration
- useLinkedState for editable state that follows its source
- useState returns [state, update, getState] for current-state access
- clsx-style class/className composition
- CLI with create, init, doctor, analyze, add, explain, mcp add commands
- MCP server exposing Octane docs and compile tooling to AI agents
- Vite, Rspack, and Rsbuild build tool integrations
- Vercel and Cloudflare deployment adapters
- TSRX VS Code extension for syntax highlighting, diagnostics, and completions

## Integrations
Vite, Rspack, Rsbuild, Astro, Docusaurus, TanStack Start, Vercel, Cloudflare, zustand, jotai, valtio, MobX, Redux, TanStack Query, Apollo Client, TanStack Router, Radix UI, shadcn/ui, Framer Motion, React Hook Form, TanStack Form, Lexical, Tiptap, MDX, i18next, TanStack Table, TanStack Virtual, Recharts, Three.js, wagmi, RainbowKit

## Platforms
WEB, API, CLI, VSC_EXTENSION, DEVELOPER_SDK

## Pricing
Open Source

## Version
@octanejs/tanstack-virtual@0.1.22

## Links
- Website: https://octanejs.dev
- Documentation: https://octanejs.dev/docs
- Repository: https://github.com/octanejs/octane
- EveryDev.ai: https://www.everydev.ai/tools/octane-js