Fumadocs

https://www.fumadocs.dev/docs
Admin
Fumadocs is a fast, flexible documentation framework designed to seamlessly integrate into React...
Tokens:260,489
Snippets:2,410
Trust Score:7.3
Update:1 week ago
Show doc for...
Tokens:
Raw
### Select and install components with npx @fumadocs/cli add

Source: https://www.fumadocs.dev/docs/cli

Starts an interactive selection to install components. You can also pass component names directly.

```bash
npx @fumadocs/cli add
```

--------------------------------

### Create a sample document

Source: https://www.fumadocs.dev/docs/manual-installation/react-router

Start writing documents at content/docs with this example.

```mdx
---
title: Hello World
---

I love Fumadocs
```

--------------------------------

### Create search server from source (Tanstack Start)

Source: https://www.fumadocs.dev/docs/headless/search/orama

Sets up the search API route in a Tanstack Start app using createFromSource. The GET handler calls server.GET(request). Place in src/routes/api/search.ts.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { source } from '@/lib/source';
import { createFromSource } from 'fumadocs-core/search/server';

const server = createFromSource(source);

export const Route = createFileRoute('/api/search')({
  server: {
    handlers: {
      GET: async ({ request }) => server.GET(request),
    },
  },
});
```

--------------------------------

### Example package-install block

Source: https://www.fumadocs.dev/docs/headless/mdx/install

An example of a package-install code block that will be transformed by the plugin.

```package-install
my-package
```

--------------------------------

### Create a new Fumadocs app with pnpm

Source: https://www.fumadocs.dev/docs

Run this command to scaffold a new Fumadocs project. It launches an interactive setup where you choose a framework (Next.js, Waku, Tanstack Start, or React Router).

```bash
pnpm create fumadocs-app
```

--------------------------------

### Install @fumadocs/satteri

Source: https://www.fumadocs.dev/docs/headless/mdx/remark-ts2js

Install the @fumadocs/satteri package for Satteri.

```bash
npm i @fumadocs/satteri
```

--------------------------------

### Install math packages

Source: https://www.fumadocs.dev/docs/markdown/math

Install remark-math, rehype-katex, and katex via package manager.

```bash
remark-math rehype-katex katex
```

--------------------------------

### Install @fumadocs/notion and @notionhq/client

Source: https://www.fumadocs.dev/docs/integrations/content/notion

Install the integration and the official Notion client using your package manager.

```bash
@fumadocs/notion @notionhq/client
```

--------------------------------

### Sample 200 response for GET /planets

Source: https://www.fumadocs.dev/docs/openapi/planets/getAllData

Example response body showing the paginated resource structure with data array and meta object containing limit, offset, total, and next link.

```json
{
  "data": [
    null
  ],
  "meta": {
    "limit": 10,
    "offset": 0,
    "total": 100,
    "next": "/planets?limit=10&offset=10"
  }
}
```

--------------------------------

### Install @fumadocs/satteri and shiki

Source: https://www.fumadocs.dev/docs/integrations/content/satteri-local-md

Install the required packages. shiki must be externalized by the bundler.

```bash
@fumadocs/satteri shiki
```

--------------------------------

### package.json: Install fumadocs-ui directly for Radix UI

Source: https://www.fumadocs.dev/docs/ui/component-library

Manual installation for Radix UI. Install the fumadocs-ui package directly without aliasing.

```json
{
  "dependencies": {
    "fumadocs-ui": "latest"
  }
}
```

--------------------------------

### Install full UI with Fumadocs CLI

Source: https://www.fumadocs.dev/docs/integrations/openapi/api-page

Run this command to install the entire UI of API pages, built on the headless layer. It installs <OpenAPIPage /> itself, so your components/api-page.tsx is no longer needed.

```npm
npx @fumadocs/cli add openapi/page
```

--------------------------------

### Create a blog post with frontmatter

Source: https://www.fumadocs.dev/docs/integrations/blog

Example MDX file for a blog post. The frontmatter includes `title`, `description`, `date`, `tags`, `authors`, and `image`. Posts are sorted by `date`, tags get pages under `/blog/tags`, and `image` is shown on cards.

```mdx
---
title: Hello World
description: My first post.
date: 2026-10-12
tags: [Announcement]
authors: [fuma]
image: /blog/hello-world.png
---
```

--------------------------------

### Install @mixedbread/sdk

Source: https://www.fumadocs.dev/docs/headless/search/mixedbread

Install the Mixedbread SDK package to enable semantic search integration.

```bash
@mixedbread/sdk
```

--------------------------------

### Install fumadocs-preview locally

Source: https://www.fumadocs.dev/docs/cli/preview

Install fumadocs-preview as a dev dependency for local configuration.

```npm
npm install fumadocs-preview -D
```

--------------------------------

### Install full GraphQL UI with Fumadocs CLI

Source: https://www.fumadocs.dev/docs/integrations/graphql/api-page

Run this command to install the entire GraphQL page UI into your codebase. It installs `<GraphQLPage />` itself, so your existing `components/api-page.tsx` is no longer needed.

```npm
npx @fumadocs/cli add graphql/page
```

--------------------------------

### Install AsyncAPI packages

Source: https://www.fumadocs.dev/docs/integrations/asyncapi

Install the required packages for the AsyncAPI integration.

```npm
npm i @fumadocs/asyncapi shiki
```

--------------------------------

### Install @fumadocs/local-md and shiki

Source: https://www.fumadocs.dev/docs/integrations/content/local-md

Install the package. The shiki package is required because it must be externalized by the bundler.

```bash
@fumadocs/local-md shiki
```

--------------------------------

### Tanstack Start Example: src/routes/docs/$.tsx

Source: https://www.fumadocs.dev/docs/mdx/entry/browser

Complete example for using browserCollections with Tanstack Start. Defines a route with a server function loader that gets the page path, a client loader that renders MDX with frontmatter, and a Page component that uses the loader data.

```tsx
import { createFileRoute, notFound } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { source } from '@/lib/source';
import browserCollections from 'collections/browser';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const data = await loader({ data: params._splat?.split('/') ?? [] });
    await clientLoader.preload(data.path);
    return data;
  },
});

const loader = createServerFn({
  method: 'GET',
})
  .validator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    return {
      path: page.path,
    };
  });

const clientLoader = browserCollections.docs.createClientLoader({
  component({ frontmatter, default: MDX }) {
    return (
      <div className="prose">
        <h1>{frontmatter.title}</h1>
        <MDX />
      </div>
    );
  },
});

function Page() {
  const data = Route.useLoaderData();

  return clientLoader.useContent(data.path);
}
```

--------------------------------

### Render AsyncAPI page without Server Components (Tanstack Start)

Source: https://www.fumadocs.dev/docs/integrations/asyncapi

Pass a client payload from server and render the page using the `AsyncAPIPage` component. This example shows the full setup for Tanstack Start, including the loader and page component.

```tsx
import { createFileRoute, notFound } from '@tanstack/react-router';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { createServerFn } from '@tanstack/react-start';
import { docs, source } from '@/lib/source';
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
import { useFumadocsLoader } from 'fumadocs-core/source/client';
import { type ReactNode, Suspense } from 'react';
import { AsyncAPIPage } from '@/components/api-page';

export const Route = createFileRoute('/docs/$')({
  component: Page,
  loader: async ({ params }) => {
    const slugs = params._splat?.split('/') ?? [];
    const data = await serverLoader({ data: slugs });

    // Fumadocs MDX: only preload content for normal pages [!code highlight:3]
    if (data.type === 'docs') {
      await docs.getPage(data.path)?.preload();
    }
    return data;
  },
});

const serverLoader = createServerFn({
  method: 'GET',
})
  .validator((slugs: string[]) => slugs)
  .handler(async ({ data: slugs }) => {
    const page = source.getPage(slugs);
    if (!page) throw notFound();

    const pageTree = await source.serializePageTree(source.getPageTree());
    // different result for AsyncAPI pages [!code ++:9]
    if (page.type === 'asyncapi') {
      return {
        type: 'asyncapi',
        title: page.data.title,
        description: page.data.description,
        pageTree,
        props: page.data.getAsyncAPIPageProps(),
      };
    }

    return {
      type: 'docs',
      path: page.path,
      pageTree,
      // ...
    };
  });

// renders a page of your `docs` collection
function Content({ path }: { path: string }) {
  // ...
}

function Page() {
  const page = useFumadocsLoader(Route.useLoaderData());
  let content: ReactNode;

  // render AsyncAPI page content [!code ++:11]
  if (page.type === 'asyncapi') {
    content = (
      <DocsPage full>
        <DocsTitle>{page.title}</DocsTitle>
        <DocsDescription>{page.description}</DocsDescription>
        <DocsBody>
          {/* pass the payload data */}
          <AsyncAPIPage {...page.props} />
        </DocsBody>
      </DocsPage>
    );
  } else {
    content = <Content path={page.path} />;
  }

  return (
    <DocsLayout tree={page.pageTree}>
      <Suspense>{content}</Suspense>
    </DocsLayout>
  );
}
```

--------------------------------

### Basic AsyncAPIPage setup

Source: https://www.fumadocs.dev/docs/integrations/asyncapi/api-page

Creates a client component that renders AsyncAPI documentation content. The component must be a client component.

```tsx
'use client';
import { createAsyncAPIPage } from '@fumadocs/asyncapi/ui';

export const AsyncAPIPage = createAsyncAPIPage({
  // config
});
```

--------------------------------

### Install fumadocs-core package

Source: https://www.fumadocs.dev/docs/headless

Install the core package. Individual integrations may require additional dependencies, listed in their guides.

```bash
fumadocs-core
```

--------------------------------

### Serve llms-full.txt (Tanstack Start)

Source: https://www.fumadocs.dev/docs/integrations/llms

Tanstack Start route for `llms-full.txt` using `createFileRoute` and a server handler.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { docsLlms } from '@/lib/source';

export const Route = createFileRoute('/llms-full.txt')({
  server: {
    handlers: {
      GET: async () => new Response(await docsLlms.full()),
    },
  },
});
```

--------------------------------

### Tanstack Start static.json route

Source: https://www.fumadocs.dev/docs/headless/search/algolia

Defines a GET handler for the static.json route using Tanstack Start's server handlers.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { source } from '@/lib/source';
import { toDocuments } from 'fumadocs-core/search/algolia';

export const Route = createFileRoute('/static.json')({
  server: {
    handlers: {
      GET: async () => Response.json(await toDocuments(source)),
    },
  },
});
```

--------------------------------

### Tanstack Start: Export search documents (src/routes/static[.]json.ts)

Source: https://www.fumadocs.dev/docs/headless/search/meilisearch

Tanstack Start route that handles GET requests to /static.json and returns search documents.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { source } from '@/lib/source';
import { toDocuments } from 'fumadocs-core/search/meilisearch';

export const Route = createFileRoute('/static.json')({
  server: {
    handlers: {
      GET: async () => Response.json(await toDocuments(source)),
    },
  },
});
```

--------------------------------

### Install blog with npx @fumadocs/cli add blog

Source: https://www.fumadocs.dev/docs/integrations/blog

Run this command to install the blog components to `components/blog` and the utilities to `lib/blog.ts`.

```npm
npx @fumadocs/cli@latest add blog
```

--------------------------------

### Set up Fumadocs on existing app with npx @fumadocs/cli init

Source: https://www.fumadocs.dev/docs/cli

Initializes Fumadocs on an existing app, supporting Next.js, React Router, Tanstack Start, and Waku. Adds docs pages in a dedicated route group and makes a few edits to existing files. Pass --i18n for internationalization, --yes to skip prompts, and --no-install to only write dependencies to package.json.

```bash
npx @fumadocs/cli init
```

--------------------------------

### Tanstack Start MCP route handler (src/routes/api/mcp.ts)

Source: https://www.fumadocs.dev/docs/integrations/llms

Implements the MCP server for Tanstack Start. Uses createFileRoute with server handlers for GET, POST, and DELETE.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { createMcpHandler, McpServer } from '@modelcontextprotocol/server';
import { registerSearchTool, registerSourceTools } from 'fumadocs-core/mcp';
import { createFromSource } from 'fumadocs-core/search/server';
import { docsLlms, source } from '@/lib/source';

const handler = createMcpHandler(() => {
  const mcp = new McpServer({
    name: 'docs',
    version: '1.0.0',
  });

  registerSourceTools(mcp, source, docsLlms);
  registerSearchTool(mcp, createFromSource(source));

  return mcp;
});

export const Route = createFileRoute('/api/mcp')({
  server: {
    handlers: {
      GET: async ({ request }) => handler.fetch(request),
      POST: async ({ request }) => handler.fetch(request),
      DELETE: async ({ request }) => handler.fetch(request),
    },
  },
});
```

--------------------------------

### Sample MDX File (content/docs/index.mdx)

Source: https://www.fumadocs.dev/docs/manual-installation/next

Create a sample MDX file with frontmatter and content.

```mdx
---
title: Hello World
---

## Introduction

I love Anime.
```

--------------------------------

### Serve llms.txt index (Tanstack Start)

Source: https://www.fumadocs.dev/docs/integrations/llms

Tanstack Start route for `llms.txt` using `createFileRoute` and a server handler.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { docsLlms } from '@/lib/source';

export const Route = createFileRoute('/llms.txt')({
  server: {
    handlers: {
      GET: async () => new Response(await docsLlms.index()),
    },
  },
});
```

--------------------------------

### Expose RSS feed via Tanstack Start server handler (src/routes/rss[.]xml.ts)

Source: https://www.fumadocs.dev/docs/guides/rss

Tanstack Start route with a server handler for GET requests that returns the RSS feed.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { getRSS } from '@/lib/rss';

export const Route = createFileRoute('/rss.xml')({
  server: {
    handlers: {
      GET: async () => new Response(getRSS()),
    },
  },
});
```

--------------------------------

### Initialize Fumadocs with CLI

Source: https://www.fumadocs.dev/docs/manual-installation

Run this command to let the Fumadocs CLI set up Fumadocs in your project. This is an alternative to manual installation.

```npm
npx @fumadocs/cli init
```

--------------------------------

### React Router Example: loader and clientLoader

Source: https://www.fumadocs.dev/docs/mdx/entry/browser

Example for using browserCollections with React Router. Defines a loader that gets the page path, a client loader that renders MDX with frontmatter, and a Page component that uses the loader data.

```tsx
import type { Route } from './+types/docs';
import { source } from '@/lib/source';
import browserCollections from 'collections/browser';

export async function loader({ params }: Route.LoaderArgs) {
  const slugs = params['*'].split('/').filter((v) => v.length > 0);
  const page = source.getPage(slugs);
  if (!page) throw new Response('Not found', { status: 404 });

  return {
    path: page.path,
  };
}

const clientLoader = browserCollections.docs.createClientLoader({
  component({ frontmatter, default: MDX }) {
    return (
      <div className="prose">
        <h1>{frontmatter.title}</h1>
        <MDX />
      </div>
    );
  },
});

export default function Page(props: Route.ComponentProps) {
  const { path } = props.loaderData;

  return clientLoader.useContent(path);
}
```

--------------------------------

### remarkLLMs Input and Output Example

Source: https://www.fumadocs.dev/docs/headless/mdx/remark-llms

Shows the input MDX and the resulting Markdown output after processing with remarkLLMs. ESM is removed, headings get IDs, and included content is expanded.

```mdx
import { Callout } from 'fumadocs-ui/components/callout';

## Getting Started

<Callout>Hello **world**.</Callout>
```

```md
## Getting Started [#getting-started]

<Callout>Hello **world**.</Callout>
```

--------------------------------

### Install specific components with npx @fumadocs/cli add banner files

Source: https://www.fumadocs.dev/docs/cli

Installs the 'banner' and 'files' components directly by name.

```bash
npx @fumadocs/cli add banner files
```

--------------------------------

### TanStack Start: route handler for serving markdown (src/routes/docs/{$}[.]md.ts)

Source: https://www.fumadocs.dev/docs/integrations/llms

Defines a GET handler that decodes the markdown URL, fetches the page, and returns the markdown response or throws notFound.

```TypeScript
import { createFileRoute, notFound } from '@tanstack/react-router';
import { decodeMarkdownUrl } from '@/lib/shared';
import { docsLlms, source } from '@/lib/source';

export const Route = createFileRoute('/docs/{$}.md')({
  server: {
    handlers: {
      GET: async ({ params }) => {
        const slugs = decodeMarkdownUrl(params._splat?.split('/') ?? []);
        const page = source.getPage(slugs);
        if (!page) throw notFound();

        return new Response(await docsLlms.page(page), {
          headers: {
            'Content-Type': 'text/markdown',
          },
        });
      },
    },
  },
});
```

--------------------------------

### Internationalization setup with asyncapiTranslations

Source: https://www.fumadocs.dev/docs/integrations/asyncapi/api-page

Extends UI translations with AsyncAPI translations. Requires configuring Internationalization at the UI level. The example shows adding a Chinese translation for 'Messages(operation page)'.

```tsx
import { defineI18n } from 'fumadocs-core/i18n';
import { uiTranslations } from 'fumadocs-ui/i18n';
import { asyncapiTranslations } from '@fumadocs/asyncapi/i18n';

const i18n = defineI18n({
  languages: ['en', 'cn'],
  defaultLanguage: 'en',
});

export const translations = i18n
  .translations()
  .extend(uiTranslations())
  // [!code ++]
  .extend(asyncapiTranslations())
  .add({
    cn: {
      displayName: 'Chinese'
      // [!code ++]
      'Messages(operation page)': '消息',
      },
  })
```

--------------------------------

### Install @fumadocs/local-html package

Source: https://www.fumadocs.dev/docs/integrations/content/local-html

Install the @fumadocs/local-html package using your package manager. This is the first step in setting up the content source.

```bash
@fumadocs/local-html
```

--------------------------------

### Install API Playground with Fumadocs CLI

Source: https://www.fumadocs.dev/docs/integrations/openapi/api-page

Run this command to install the UI of the playground. Its state comes from usePlayground().

```npm
npx @fumadocs/cli add openapi/playground
```

--------------------------------

### Auto Links Example

Source: https://www.fumadocs.dev/docs/markdown

Demonstrates how internal and external links are handled. Internal links use the framework's Link component for prefetching, while external links get default security attributes.

```mdx
[My Link](https://github.github.com/gfm)

This also works: https://github.github.com/gfm.
```

--------------------------------

### Tanstack Start package.json build script

Source: https://www.fumadocs.dev/docs/headless/search/algolia

Builds the Tanstack Start app and then runs the sync script with the .env.local file if it exists.

```json
{
  "scripts": {
    "build": "vite build && node --env-file-if-exists=.env.local scripts/sync-content.ts"
  }
}
```

--------------------------------

### Render docs page without React Server Components

Source: https://www.fumadocs.dev/docs/integrations/content/sanity

For non-RSC setups, import `renderToc` from '@fumadocs/sanity/client' and use a server payload function. This example shows how to load data and render the page with `useLoaderData()`.

```tsx
import { getSource } from '@/lib/source';
import { renderToc } from '@fumadocs/sanity/client';
import { CustomPortableText } from '@/components/sanity';
import { DocsPage, DocsBody, DocsDescription, DocsTitle } from 'fumadocs-ui/layouts/docs/page';

// where you return server payload
export async function serverPayload(slugs: string[]) {
  const source = await getSource();
  const page = source.getPage(slugs);
  if (!page) throw new Error('not found');

  const { title, description, _toc, body } = await page.data.load();
  return { title, description, toc: _toc, body };
}

export function Page() {
  // receive server payload
  const { toc, body, title, description } = useLoaderData();

  return (
    <DocsPage toc={renderToc({ toc, render: (body) => <CustomPortableText value={body} /> })}>
      <DocsTitle>{title}</DocsTitle>
      <DocsDescription>{description}</DocsDescription>
      <DocsBody>
        <CustomPortableText value={body!} />
      </DocsBody>
    </DocsPage>
  );
}
```

--------------------------------

### Specify code samples via OpenAPI schema

Source: https://www.fumadocs.dev/docs/integrations/openapi/api-page

Shows how to add code samples directly in the OpenAPI schema using the x-codeSamples extension. The example defines a JavaScript SDK sample for a GET /plants endpoint.

```yaml
paths:
  /plants:
    get:
      x-codeSamples:
        - lang: js
          label: JavaScript SDK
          source: |
            const planter = require('planter');
            planter.list({ unwatered: true });
```

--------------------------------

### package.json: Alias fumadocs-ui to @fumadocs/base-ui

Source: https://www.fumadocs.dev/docs/ui/component-library

Manual installation for Base UI. Alias fumadocs-ui to the @fumadocs/base-ui package and ensure @base-ui/react is installed.

```json
{
  "dependencies": {
    "fumadocs-ui": "npm:@fumadocs/base-ui@latest",
    // make sure Base UI is already installed
    "@base-ui/react": "..."
  }
}
```

--------------------------------

### Import and use page tree utilities

Source: https://www.fumadocs.dev/docs/headless/utils/page-tree

Import utilities from 'fumadocs-core/page-tree' and use them to interact with a page tree. The example shows how to get neighbours, roots, siblings, parent, and find a path using a matcher function.

```TypeScript
import {
  findNeighbour,
  findSiblings,
  getPageTreeRoots,
  findParent,
  findPath,
  type Root,
} from 'fumadocs-core/page-tree';

const pageTree: Root = {
  // ...the root of page tree
};

// Get neighbours of a page
const neighbours = findNeighbour(pageTree, '/url/to/page');

// Get a list of root folders
const roots = getPageTreeRoots(pageTree);

// Get the sibling nodes of a page
const siblings = findSiblings(pageTree, '/url/to/page');

// Get the parent node of a page
const parent = findParent(pageTree, '/url/to/page');

// Find the path to the first matching node
const path = findPath(
  pageTree.children,
  // matcher
  (node) => node.type === 'page' && node.url === '/url/to/page',
);
```

--------------------------------

### Initialize fumadocs-preview config

Source: https://www.fumadocs.dev/docs/cli/preview

Initialize the configuration file for fumadocs-preview after local installation.

```npm
npx fumadocs-preview init
```

--------------------------------

### Get authenticated user with cURL

Source: https://www.fumadocs.dev/docs/openapi/authentication/getMe

Retrieves the authenticated user's information using HTTP Basic authentication. The Authorization header must contain the base64-encoded credentials; the example uses an empty username and password (Basic Og==).

```bash
curl -X GET 'https://galaxy.scalar.com/me' \
  -H 'Authorization: Basic Og=='
```

--------------------------------

### Tanstack Start/Router provider setup

Source: https://www.fumadocs.dev/docs/headless

Wrap your root component with TanstackProvider from 'fumadocs-core/framework/tanstack'.

```tsx
import type { ReactNode } from 'react';
import { TanstackProvider } from 'fumadocs-core/framework/tanstack';

export function Root({ children }: { children: ReactNode }) {
  return <TanstackProvider>{children}</TanstackProvider>;
}
```

--------------------------------

### Install the built-in story controls UI

Source: https://www.fumadocs.dev/docs/integrations/story/headless

Installs the built-in story controls panel using the Fumadocs CLI. After installation, the lib/story.tsx file is updated to import the WithControl component from the installed location.

```npm
npx @fumadocs/cli add story/controls
```

```tsx
import { defineStoryFactory } from '@fumadocs/story/vite/client';
import { WithControl } from '@/components/story';

export const { defineStory } = defineStoryFactory({ WithControl });
```

--------------------------------

### Install GraphView via CLI

Source: https://www.fumadocs.dev/docs/ui/components/graph-view

Run this command to add the graph-view component to your project.

```bash
npx @fumadocs/cli add graph-view
```

--------------------------------

### Create GraphQL server instance (lib/graphql.ts)

Source: https://www.fumadocs.dev/docs/integrations/graphql

Create the GraphQL server instance using createGraphQL. The input accepts SDL files/URLs, SDL text, introspection results, or GraphQLSchema instances.

```ts
import { createGraphQL } from '@fumadocs/graphql/server';

// note: this is a server-side API
export const graphql = createGraphQL({
  // the GraphQL schema, it accepts:
  // SDL files/URLs (including `extend type`), SDL text,
  // introspection results, and `GraphQLSchema` instances.
  input: ['./schema.graphql'],
});
```

--------------------------------

### Update DocsLayoutProps import after CLI install

Source: https://www.fumadocs.dev/docs/guides/customize-ui

After installing the layout/docs component, update the import to use the installed types instead of the ones from Fumadocs UI.

```tsx
// [!code --]
import type { DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
// [!code ++]
import type { DocsLayoutProps } from '@/components/layout/docs';
```

--------------------------------

### Install fumadocs-typescript

Source: https://www.fumadocs.dev/docs/ui/components/auto-type-table

Install the fumadocs-typescript package via npm.

```npm
npm i fumadocs-typescript
```

--------------------------------

### Basic input configuration for createGraphQL()

Source: https://www.fumadocs.dev/docs/integrations/graphql/server

Configures the GraphQL server with an array of SDL file paths. This is the simplest way to specify the input schemas.

```ts
import { createGraphQL } from '@fumadocs/graphql/server';

export const graphql = createGraphQL({
  input: ['./schema.graphql'],
});
```

--------------------------------

### Create search API from indexes (Tanstack Start)

Source: https://www.fumadocs.dev/docs/headless/search/orama

Sets up a search API route in Tanstack Start using `createSearchAPI` and a server handler that calls `server.GET(request)`. The indexes are built from `source.getPages()` with `structuredData` from page data.

```ts
import { createFileRoute } from '@tanstack/react-router';
import { source } from '@/lib/source';
import { createSearchAPI } from 'fumadocs-core/search/server';

const server = createSearchAPI('advanced', {
  indexes: source.getPages().map((page) => ({
    title: page.data.title,
    description: page.data.description,
    url: page.url,
    id: page.url,
    structuredData: page.data.structuredData,
  })),
});

export const Route = createFileRoute('/api/search')({
  server: {
    handlers: {
      GET: async ({ request }) => server.GET(request),
    },
  },
});
```

--------------------------------

### Install fumadocs-docgen

Source: https://www.fumadocs.dev/docs/headless/mdx/remark-ts2js

Install the fumadocs-docgen package for Fumadocs MDX.

```bash
npm i fumadocs-docgen
```

--------------------------------

### Install fumadocs-epub package

Source: https://www.fumadocs.dev/docs/guides/export-epub

Install the fumadocs-epub package manually.

```npm
npm install fumadocs-epub
```

--------------------------------

### Run Fumadocs Studio

Source: https://www.fumadocs.dev/docs/editor

Starts the Studio visual editor, which opens your local docs in a browser. Requires Node.js 24 or later and looks for content/docs by default.

```bash
npx @fumadocs-editor/studio
```

--------------------------------

### Tanstack Start OAuth redirect handler

Source: https://www.fumadocs.dev/docs/integrations/openapi/server

Creates an OAuth redirect handler for Tanstack Start. This handler sends users back to the page that started the OAuth flow.

```TypeScript
import { openapi } from '@/lib/openapi';
import { createFileRoute } from '@tanstack/react-router';

const handler = openapi.createOAuthHandler();

export const Route = createFileRoute('/api/oauth')({
  server: {
    handlers: {
      GET: async ({ request }) => handler(request),
    },
  },
});
```

--------------------------------

### Install @fumadocs/language

Source: https://www.fumadocs.dev/docs/ui/translations

Install the language pack package via npm.

```bash
npm i @fumadocs/language
```

--------------------------------

### Install Fumadocs UI and Core with npm

Source: https://www.fumadocs.dev/docs/manual-installation/next

Install the required packages fumadocs-ui and fumadocs-core using npm.

```bash
npm i fumadocs-ui fumadocs-core
```

--------------------------------

### Install beautiful-mermaid

Source: https://www.fumadocs.dev/docs/markdown/mermaid

Install the beautiful-mermaid package, a third-party Mermaid renderer.

```npm
npm install beautiful-mermaid
```

--------------------------------

### Install Typesense Search Feature via Fumadocs CLI

Source: https://www.fumadocs.dev/docs/search/typesense

Run this command to automatically set up the search dialog, static.json route, and a script to sync the search index after each build.

```bash
npx @fumadocs/cli feature search --provider typesense
```

--------------------------------

### Install @fumadocs/story

Source: https://www.fumadocs.dev/docs/integrations/story/vite

Install the Fumadocs Story package using npm.

```npm
npm i @fumadocs/story
```

--------------------------------

### Install @fumadocs/sanity package

Source: https://www.fumadocs.dev/docs/integrations/content/sanity

Install the Fumadocs Sanity integration package.

```npm
npm i @fumadocs/sanity
```

--------------------------------

### CLI Setup for Mixedbread Search

Source: https://www.fumadocs.dev/docs/search/mixedbread

Run this command to have Fumadocs CLI set up the search dialog, search route, static.json route, and a sync script for your store after each build.

```bash
npx @fumadocs/cli feature search --provider mixedbread
```

--------------------------------

### Install Python command

Source: https://www.fumadocs.dev/docs/integrations/content/python

Install the Python command from the node_modules directory.

```bash
pip install ./node_modules/fumadocs-python
```
Tokens:
Raw