Framework integrations

Choose the framework boundary

Framework integrations are different from both build tools and bindings. Vite, Rspack, and Rsbuild choose the compilation pipeline. A binding adapts a library’s React-facing hooks or components. A framework integration connects Octane to a host that owns more of the application.

Astro islands

Use @octanejs/astro when Astro owns pages, layouts, routing, and the HTML shell while Octane owns individual islands. The integration compiles .tsrx and explicitly owned .tsx files, server-renders island HTML, and hydrates through Astro’s client:* directives.

pnpm add octane @octanejs/astro

// astro.config.mjs
import { defineConfig } from 'astro/config';
import octane from '@octanejs/astro';

export default defineConfig({
	integrations: [octane()],
});

---
import { Counter } from '../components/Counter.tsrx';
---

<Counter client:load start={0} />

Astro’s client directives decide when the outer island hydrates. Octane’s own deferred hydration can still control work inside the island. See the @octanejs/astro package guide for client-only islands, mixed JSX frameworks, ownership filters, and all integration options.

Docusaurus content sites

@octanejs/docusaurus adopts Docusaurus’s headless content boundary: configuration, plugins, routes, generated data, and MDX. It provides an Octane-native router, static rendering and hydration helpers, and an initial classic documentation theme.

pnpm add octane @octanejs/docusaurus @docusaurus/core@3.10.1

// vite.config.ts
import { defineConfig } from 'vite';
import { octane } from 'octane/compiler/vite';
import { docusaurus } from '@octanejs/docusaurus/vite';

export default defineConfig({
	plugins: [...docusaurus(), octane()],
});

This integration is a technical preview. It does not run React-authored themes or swizzles unchanged, and a complete start/build CLI workflow is not yet part of its supported surface. Read the @octanejs/docusaurus package guide for the pinned Docusaurus version, theme setup, and current scope.

TanStack Start applications

@octanejs/tanstack-start is the full-stack TanStack Start integration for Octane. It owns file-route generation, route splitting, server functions, streaming SSR, hydration, and the Vite development and production environments. This website runs on it.

pnpm add octane @octanejs/tanstack-start @octanejs/tanstack-router
pnpm add -D vite

// vite.config.ts
import { defineConfig } from 'vite';
import { tanstackStart } from '@octanejs/tanstack-start/plugin/vite';

export default defineConfig({
	plugins: [tanstackStart()],
});

Application code imports Start APIs from the framework integration and routing APIs from the router binding:

import { createServerFn } from '@octanejs/tanstack-start';
import { createFileRoute } from '@octanejs/tanstack-router';

See the @octanejs/tanstack-start package guide for the public client, server, RPC, hydration, and Vite entries. For Query, Form, Store, Table, Virtual, Router utilities, and other library APIs, use the TanStack bindings in the bindings directory.