Framework integrations

Find the right integration

Choose the package for the framework that runs your app. It covers more than compilation, including routes, server rendering, hydration, and content. If you only need compiler support, see Build tools. For React library ports, see Bindings.

Astro islands

Use @octanejs/astro when most of the page belongs to Astro and you want to add Octane islands. The integration compiles every .tsrx file and any .tsx files you assign to Octane. It renders those components on the server and connects them to 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 still decides when each island hydrates. You can use Octane’s deferred hydration for work inside an island. The @octanejs/astro package guide covers client-only islands, mixed JSX frameworks, ownership filters, and the available options.

Docusaurus content sites

Use @octanejs/docusaurus to keep Docusaurus’s configuration, plugins, routes, generated data, and MDX while rendering the site with Octane. The package includes an Octane router, static rendering, hydration helpers, and a starter 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 package is a technical preview. React themes and swizzles need changes, and the full start and build workflow isn’t ready yet. Check the @octanejs/docusaurus package guide for the pinned Docusaurus version, theme setup, and current scope.

TanStack Start applications

Use @octanejs/tanstack-start for a full-stack Octane app built on TanStack Start. It includes file-based routing, route splitting, server functions, streaming SSR, hydration, and the Vite setup for development and production. This website uses 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()],
});

Import server and app APIs from the Start package. Import route 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 client, server, RPC, hydration, and Vite entry points. TanStack Start is the framework. Query, Form, Store, Table, Virtual, Router, and the other TanStack packages are libraries; you’ll find their Octane ports in the TanStack bindings directory.