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:

---
import type { GetStaticPaths, InferGetStaticPropsType } from 'astro';
import Layout from '@/layouts/Layout.astro';
import { Docs } from '@/components/docs';
import { getSource } from '@/lib/source';

export const prerender = true;

export const getStaticPaths = (async () => {
  const source = await getSource();
  return source.getPages().map((page) => ({
    params: { slug: decodeURI(page.slugs.join('/')) || undefined },
    props: { page },
  }));
}) satisfies GetStaticPaths;

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { page } = Astro.props;
const source = await getSource();
const pageTree = await source.serializePageTree(source.getPageTree());
const { title, description, _toc, body } = await page.data.load();
---

<Layout title={page.data.title}>
  <Docs
    client:load
    pathname={Astro.url.pathname}
    params={Astro.params}
    tree={pageTree}
    title={title}
    description={description}
    toc={_toc}
    body={body}
  />
</Layout>

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