Docs sites

Docs often repeat the snippets and prompts the product shows, and the copies drift apart. Import the definitions into your MDX pages instead. Then docs and product render the same definitions, a fix lands in both, and copybook usages lists every page that shows one.

Render a definition in MDXCopy Anchor Link

Any MDX docs site that can import modules works, such as Fumadocs, Nextra, Docusaurus, and Astro Starlight. Import the definition and a component, and render it in the page:

import { listVariants, renderExample } from "@copybook/core";

import { CodeVariants } from "@/components/copybook/code-variants";
import { connect } from "@/content/connect";

# Connect to a branch

<CodeVariants
  items={listVariants(connect).map((variant) => ({
    key: variant.key,
    label: variant.label,
    rendered: renderExample(connect, { variant: variant.key }),
  }))}
/>

Docs readers usually aren't signed in, so renderExample fills in each param's .example(), and secrets render as their placeholders. Where a page knows real values, call render with them instead.

If the page is a server component, as in Fumadocs and Nextra on the App Router, the definition stays on the server and only the rendered tree reaches the browser. Otherwise, the definition is bundled into the page like any import.

Count docs pages as usagesCopy Anchor Link

Add your docs to usage.include:

export default defineConfig({
  content: ["content/**/*.ts"],
  usage: { include: ["app/**/*.tsx", "content/docs/**/*.mdx"] },
});

Copybook reads an MDX file's import and export blocks, the same way it reads imports in code, and resolves them with your tsconfig.json paths. Imports shown in code fences don't count. If a page renders a definition through a component of yours, the component's file is the usage, so include it too.

copybook usages, show, report, and Studio list each page, and check stops warning about definitions only your docs show. Add a placement such as docs/connect to the definition, so the catalog says where it appears.

Markdown promptsCopy Anchor Link

A docs page that links to a prompt by URL, such as a "Copy prompt" button that fetches /prompts/nextjs.md, doesn't import anything. See Markdown prompts for prompts kept as Markdown files, which count as used wherever their URL appears.