Sanity

Overview

Fumadocs provides an official integration to simplify the setup of Sanity CMS.

You can see our Sanity Example on GitHub.

Setup

This guide assumes you already configured Sanity according to their docs.

Data Types

Run the following command to initialize content types.

npx @fumadocs/cli add sanity/base

Or you can run npx @fumadocs/cli add and browse additional Sanity presets to install.

import { docsType, blockContent, callout, card, cards } from '@/lib/sanity/base';

export const schemaTypes = [blockContent, callout, card, cards, docsType];

Content Loader

Install the integration:

npm i @fumadocs/sanity

Create the source with the Sanity client:

lib/source.ts

import { dynamicLoader } from 'fumadocs-core/source';
import { createSanitySource } from '@fumadocs/sanity';
// the Sanity client
import { client } from '@/sanity/lib/client';
// the generated types
import type { Docs } from '@/sanity/types';

const source = dynamicLoader(
  createSanitySource<Docs>({
    client,
    docType: 'docs',
  }),
  {
    baseUrl: '/docs',
  },
);

export async function getSource() {
  return source.get();
}

Now render pages with the getSource() function:

app/routes/docs.tsx

import type { Route } from './+types/docs';
import { useFumadocsLoader } from 'fumadocs-core/source/client';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
import { renderToc } from '@fumadocs/sanity/client';
import { getSource } from '@/lib/source';
import { CustomPortableText } from '@/components/sanity';

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

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

export default function Page({ loaderData }: Route.ComponentProps) {
  const { title, description, toc, body, pageTree } = useFumadocsLoader(loaderData);

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

Done

Create documents under the docs type in your studio editor, and they appear in the docs route.

OverviewCopy Anchor Link

SetupCopy Anchor Link

Data TypesCopy Anchor Link

Content LoaderCopy Anchor Link

DoneCopy Anchor Link

On this page

Overview

Setup

Data Types

Content Loader

Done