TanStack Start

The repository includes a small TanStack Start example. It is the fastest way to inspect the current editor shell, catalog registration, in-memory transport, and Copilot wiring together.

Run the starter

From the repository root:

npm install
npm run dev --workspace example-tanstack-start

The example lives in examples/tanstack-start.

Add it to an existing application

Install and import the packages as described in Manual Installation.

For a full-screen editor route, you may choose to render the route on the client:

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/pages/$pageId/edit")({
  ssr: false,
  component: EditorPage,
});

Client-only rendering is useful for a workspace-style editor, but it is not a requirement for every renderer. Your public pages may still use the rendering strategy that fits your application.

Connect your backend

The starter uses createInMemoryTransport so it can run without a server. Replace that transport with:

• createHttpTransport pointed at your own endpoints; or
• a custom TransportClient backed by TanStack Start server functions.

Your server functions remain responsible for authorization, tenant scope, validation, and persistence.

Learn from the starter

The relevant files are:

examples/tanstack-start/src/
├── routes/index.tsx
├── catalog.tsx
├── copilot.tsx
└── catalogs.generated.ts

Treat the starter as a working reference, not as an application architecture you must copy.

Next steps

• Register Your First Component
• HTTP Transport