### Install @document0/core

Source: https://github.com/doc0team/document0/blob/main/packages/core/README.md

Installation commands for various package managers.

```bash
npm install @document0/core
# or
pnpm add @document0/core
# or
yarn add @document0/core
# or
bun add @document0/core
```

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

### Start development server

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/create.mdx

Navigate to the project directory and start the development server.

```bash
cd my-docs
pnpm dev
```

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

### Install Document0 packages

Source: https://github.com/doc0team/document0/blob/main/README.md

Install the core and MDX packages via npm.

```bash
# Install both packages
npm install @document0/core @document0/mdx
```

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

### Install @document0/cli

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/cli.mdx

Install the CLI as a development dependency in your project.

```bash
npm install -D @document0/cli
```

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

### Install @document0/mdx

Source: https://github.com/doc0team/document0/blob/main/packages/mdx/README.md

Installation commands for various package managers.

```bash
npm install @document0/mdx
# or
pnpm add @document0/mdx
# or
yarn add @document0/mdx
# or
bun add @document0/mdx
```

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

### Install document0 Core, MDC, and Shiki (bun)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the core document0 package, the Markdown-to-Component processor, and shiki for syntax highlighting for Vue/Svelte/Other frameworks using bun.

```bash
bun add @document0/core @document0/mdc shiki
```

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

### Install document0 CLI (bun)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the document0 CLI globally as a development dependency using bun to manage plugins and components.

```bash
bun add -D @document0/cli
```

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

### Install @document0/mdc

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/mdc.mdx

Install the package along with the required Shiki dependency.

```bash
npm install @document0/mdc shiki
```

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

### Install pre-built components

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/custom-components.mdx

Use the CLI to add pre-built components from the registry.

```bash
document0 add document0/sidebar document0/toc document0/breadcrumbs
```

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

### Run Development Server

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/nextjs.mdx

Start the Next.js development server.

```bash
npm run dev
```

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

### Install document0 Core and MDX Packages (bun)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Use this command to install the core document0 package and the MDX processor for React/Next.js projects using bun.

```bash
bun add @document0/core @document0/mdx
```

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

### Add a plugin or component

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/cli.mdx

Install a single plugin or multiple plugins/components from the registry. Dependencies are auto-installed.

```bash
document0 add document0/sidebar
document0 add document0/sidebar document0/breadcrumbs document0/toc
```

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

### Create Content Directory and MDX File

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/nextjs.mdx

Commands to create the content directory and an example MDX file.

```bash
mkdir -p content/docs
```

```mdx
---
title: My Docs
description: Welcome to my documentation.
---

# My Docs

Hello world!
```

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

### Install document0 Core, MDC, and Shiki (npm)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the core document0 package, the Markdown-to-Component processor, and shiki for syntax highlighting for Vue/Svelte/Other frameworks using npm.

```bash
npm install @document0/core @document0/mdc shiki
```

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

### Install document0 CLI (pnpm)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the document0 CLI globally as a development dependency using pnpm to manage plugins and components.

```bash
pnpm add -D @document0/cli
```

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

### Install document0 Core and MDX Packages (npm)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Use this command to install the core document0 package and the MDX processor for React/Next.js projects using npm.

```bash
npm install @document0/core @document0/mdx
```

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

### Install document0 Core, MDC, and Shiki (pnpm)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the core document0 package, the Markdown-to-Component processor, and shiki for syntax highlighting for Vue/Svelte/Other frameworks using pnpm.

```bash
pnpm add @document0/core @document0/mdc shiki
```

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

### Install search dialog

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/search.mdx

Adds the pre-built search dialog component to the project via the document0 CLI.

```bash
document0 add document0/search-dialog
```

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

### Install document0 Core, MDC, and Shiki (yarn)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the core document0 package, the Markdown-to-Component processor, and shiki for syntax highlighting for Vue/Svelte/Other frameworks using yarn.

```bash
yarn add @document0/core @document0/mdc shiki
```

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

### Install document0 CLI (yarn)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the document0 CLI globally as a development dependency using yarn to manage plugins and components.

```bash
yarn add -D @document0/cli
```

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

### Install page navigation component

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/custom-components.mdx

Add the page navigation component from the registry.

```bash
document0 add document0/page-navigation
```

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

### Install document0 Core and MDX Packages (yarn)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Use this command to install the core document0 package and the MDX processor for React/Next.js projects using yarn.

```bash
yarn add @document0/core @document0/mdx
```

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

### Install document0 Core and MDX Packages (pnpm)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Use this command to install the core document0 package and the MDX processor for React/Next.js projects using pnpm.

```bash
pnpm add @document0/core @document0/mdx
```

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

### Install document0 Core Packages

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/quickstart.mdx

Install the necessary packages for document0, including the core functionalities, MDX support, and Shiki for syntax highlighting. This command is for npm users.

```bash
npm install @document0/core @document0/mdx shiki @mdx-js/mdx
```

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

### Install Vue UI Components

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/vue.mdx

Command to install specific Vue UI components for the documentation site, such as sidebar, table of contents, and search dialog.

```bash
npx @document0/cli add document0-vue/sidebar document0-vue/toc document0-vue/search-dialog
```

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

### Install Next.js Dependencies

Source: https://github.com/doc0team/document0/blob/main/packages/create-document0/template-nextjs/content/docs/installation.mdx

Install Next.js and related packages required for document0 integration. This includes MDX and Shiki for content processing.

```bash
npm install next react react-dom @mdx-js/mdx shiki
```

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

### Update installed items

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/cli.mdx

Update all installed components and plugins to their latest registry versions, or specify a particular item to update.

```bash
document0 update                    # update all installed items
document0 update document0/sidebar  # update a specific item
```

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

### Install Peer Dependencies (bun)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the required peer dependencies for document0 with React/Next.js projects using bun. These include shiki for syntax highlighting, MDX compiler, and React.

```bash
bun add shiki @mdx-js/mdx react react-dom
```

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

### Test Plugin Locally

Source: https://github.com/doc0team/document0/blob/main/CONTRIBUTING-PLUGINS.md

Commands to point the CLI to a local registry for testing plugin installation.

```bash
# Point the CLI at your local registry
export DOCUMENT0_REGISTRY=file://$(pwd)/registry
npx @document0/cli add my-plugin
```

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

### Initialize Vue and Vite Project

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/vue.mdx

Commands to scaffold a new Vue TypeScript project and install necessary dependencies.

```bash
npm create vite@latest my-docs -- --template vue-ts
cd my-docs
```

```bash
npm install vue-router@4 tailwindcss @tailwindcss/vite
```

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

### Document0 lock file structure

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/cli.mdx

The `document0.lock.json` file tracks installed versions, paths, and installation timestamps. Commit this file to your repository.

```json
{
  "version": 1,
  "items": {
    "document0/sidebar": {
      "namespace": "document0",
      "name": "sidebar",
      "version": "0.1.0",
      "installPath": "components/document0/sidebar",
      "installedAt": "2026-03-29T00:00:00.000Z"
    }
  }
}
```

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

### Install Peer Dependencies (npm)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the required peer dependencies for document0 with React/Next.js projects using npm. These include shiki for syntax highlighting, MDX compiler, and React.

```bash
npm install shiki @mdx-js/mdx react react-dom
```

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

### Install Vue Dependencies for Vite Project

Source: https://github.com/doc0team/document0/blob/main/packages/create-document0/template-vue/content/docs/installation.mdx

Install essential Vue.js dependencies, including Vue Router and Tailwind CSS with its Vite plugin.

```bash
npm install vue vue-router@4 tailwindcss @tailwindcss/vite
```

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

### Install Peer Dependencies (pnpm)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the required peer dependencies for document0 with React/Next.js projects using pnpm. These include shiki for syntax highlighting, MDX compiler, and React.

```bash
pnpm add shiki @mdx-js/mdx react react-dom
```

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

### Create Index MDX File

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/vue.mdx

This is an example of an MDX file used for creating documentation pages. It includes frontmatter for title and description, followed by Markdown content.

```mdx
---
title: My Docs
description: Welcome to my documentation.
---

# My Docs

Hello world!
```

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

### Install Peer Dependencies (yarn)

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Install the required peer dependencies for document0 with React/Next.js projects using yarn. These include shiki for syntax highlighting, MDX compiler, and React.

```bash
yarn add shiki @mdx-js/mdx react react-dom
```

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

### Run @document0/cli commands with npx

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/cli.mdx

Execute CLI commands directly without a local installation using npx.

```bash
npx @document0/cli add document0/sidebar
```

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

### Configure Sidebar Order with _meta.json

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/meta-json.mdx

Use a `_meta.json` file to define the order, titles, and default open state of pages in the sidebar. Strings starting with "---" create separators.

```json
{
  "title": "API Reference",
  "pages": [
    "index",
    "--- Core",
    "dosource",
    "buildpagetree",
    "---",
    "--- Navigation",
    "getbreadcrumbs",
    "getpageneighbours"
  ],
  "defaultOpen": true,
  "icon": "📖"
}
```

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

### Set up Shiki Highlighter

Source: https://github.com/doc0team/document0/blob/main/packages/create-document0/template-vue/content/docs/installation.mdx

Initialize the Shiki highlighter with desired themes and languages for code syntax highlighting.

```typescript
import { createHighlighter } from "shiki";

let highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = null;

export async function getHighlighter() {
  if (highlighter) return highlighter;
  highlighter = await createHighlighter({
    themes: ["github-dark", "github-light"],
    langs: ["typescript", "javascript", "vue", "bash", "json", "css"],
  });
  return highlighter;
}
```

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

### Initialize DocsSource Configuration

Source: https://github.com/doc0team/document0/blob/main/packages/create-document0/template-nextjs/content/docs/configuration.mdx

Configure the root directory, base URL, and file extensions for scanning content. Ensure `rootDir` is set to your content's location.

```typescript
import { DocsSource } from "@document0/core";

const source = new DocsSource({
  rootDir: "./content/docs", // required
  baseUrl: "/docs",          // default: "/docs"
  extensions: [".md", ".mdx"] // default
});
```

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

### Initialize document0 core and MDX processing

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/index.mdx

Demonstrates setting up a documentation source, generating a page tree, creating a search route, and processing MDX content with syntax highlighting.

```ts
import { DocsSource, createSearchRoute } from "@document0/core";
import { processMdx } from "@document0/mdx";
import { createHighlighter } from "shiki";

const source = new DocsSource({ rootDir: "./content/docs", baseUrl: "/docs" });
const pages = source.getPages();
const tree = source.getPageTree();

// Full-text search API route (Orama-backed)
export const { GET } = createSearchRoute(source);

// MDX processing with syntax highlighting
const highlighter = await createHighlighter({ themes: ["github-dark"], langs: ["typescript"] });
const { code, frontmatter, toc } = await processMdx(rawMdx, { highlighter });
```

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

### Initialize Next.js Project

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/nextjs.mdx

Commands to scaffold a new Next.js project with TypeScript and Tailwind CSS, or using the document0 CLI.

```bash
npx create-next-app@latest my-docs --typescript --tailwind --app --no-src-dir
cd my-docs
```

```bash
npx create-document0 my-docs
```

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

### Scaffold Next.js Project with create-document0

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/quickstart.mdx

Use this command to quickly set up a new Next.js project with document0 pre-configured. Navigate into the project directory and run the development server.

```bash
npx create-document0 my-docs
cd my-docs
npm run dev
```

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

### Scaffold a new project

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/create.mdx

Run the CLI to generate a new documentation project. If the project name is omitted, the CLI will prompt for one.

```bash
npx create-document0 my-docs
```

```bash
pnpm dlx create-document0 my-docs
```

```bash
bunx create-document0 my-docs
```

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

### Scaffold New Document0 Projects

Source: https://context7.com/doc0team/document0/llms.txt

Use `create-document0` to quickly set up new documentation projects with Next.js or Vue templates. Supports interactive prompts and various package managers.

```bash
# Create a new project interactively
npx create-document0

# Create with a specific name
npx create-document0 my-docs

# Using different package managers
pnpm create document0 my-docs
yarn create document0 my-docs
bun create document0 my-docs

# Interactive prompts:
# ? Project name: my-docs
# ? Framework: (Next.js / Vue)
# ? Install dependencies with pnpm? (Y/n)

# After creation:
cd my-docs
npm run dev
# Open http://localhost:3000/docs (Next.js) or http://localhost:5173 (Vue)
```

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

### Create Content Directory

Source: https://github.com/doc0team/document0/blob/main/packages/create-document0/template-nextjs/content/docs/installation.mdx

Set up the directory structure for your documentation content. This command creates a 'docs' subdirectory within 'content'.

```bash
mkdir -p content/docs
```

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

### Define Markdown code fence

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/mdx.mdx

Example of a fenced code block that will be processed by Shiki.

```md
```typescript
const x: number = 1;
```
```

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

### Load pages and build tree

Source: https://github.com/doc0team/document0/blob/main/README.md

Initialize the DocsSource and generate a page tree for navigation.

```typescript
import { DocsSource, buildPageTree } from "@document0/core";

const source = new DocsSource({
  rootDir: "./content/docs",
  baseUrl: "/docs",
});

const pages = source.getPages();
const tree = buildPageTree(pages, "./content/docs");
```

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

### Configure registry.json Metadata

Source: https://github.com/doc0team/document0/blob/main/CONTRIBUTING-PLUGINS.md

The JSON schema for defining plugin metadata, including dependencies and installation paths.

```json
{
  "name": "my-plugin",
  "description": "Short, clear description of what it does.",
  "author": "your-github-username",
  "version": "0.1.0",
  "tags": ["relevant", "search", "tags"],
  "category": "mdx or core",
  "files": ["index.ts"],
  "dependencies": {},
  "registryDependencies": [],
  "installPath": "plugins/my-plugin"
}
```

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

### Initialize DocsSource

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/core.mdx

Create a new DocsSource instance to scan directories for markdown files and generate typed page data.

```ts
import { DocsSource } from "@document0/core";

const source = new DocsSource({
  rootDir: "./content/docs", // required: absolute or relative path
  baseUrl: "/docs",          // default: "/docs"
  extensions: [".md", ".mdx"], // default
});
```

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

### Initialize Shiki Highlighter

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/vue.mdx

Create a singleton instance of the Shiki highlighter for syntax highlighting.

```typescript
// server/highlighter.ts
import { createHighlighter } from "shiki";

let highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = null;

export async function getHighlighter() {
  if (highlighter) return highlighter;
  highlighter = await createHighlighter({
    themes: ["github-dark", "github-light"],
    langs: ["typescript", "javascript", "vue", "bash", "json", "css", "html"],
  });
  return highlighter;
}
```

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

### DocsSource Initialization

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/core.mdx

Initialize the DocsSource to scan a directory for markdown files and build data structures.

```APIDOC
## DocsSource Initialization

### Description
Initialize the DocsSource to scan a directory for markdown files and build data structures.

### Method
Constructor

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **rootDir** (string) - Required - Absolute or relative path to the content directory.
- **baseUrl** (string) - Optional - The base URL for the documentation (default: "/docs").
- **extensions** (string[]) - Optional - File extensions to include (default: [".md", ".mdx"])

### Request Example
```ts
import { DocsSource } from "@document0/core";

const source = new DocsSource({
  rootDir: "./content/docs",
  baseUrl: "/docs",
  extensions: [".md", ".mdx"]
});
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Create the search API route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/search.mdx

Defines a GET endpoint at /internal/search that returns search results based on the provided source.

```ts
// app/internal/search/route.ts
import { createSearchRoute } from "@document0/core";
import { source } from "@/lib/source";

export const { GET } = createSearchRoute(source);
```

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

### Implement Documentation Page

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/nextjs.mdx

Create the dynamic route handler to process MDX content and render documentation pages.

```tsx
// app/docs/[[...slug]]/page.tsx
import { notFound } from "next/navigation";
import { run } from "@mdx-js/mdx";
import * as runtime from "react/jsx-runtime";
import { source } from "@/lib/source";
import { getHighlighter } from "@/lib/highlighter";
import { processMdx } from "@document0/mdx";

export async function generateStaticParams() {
  return source.getPages().map((page) => ({
    slug: page.slugs.filter(Boolean),
  }));
}

export default async function DocPage({
  params,
}: {
  params: Promise<{ slug?: string[] }>;
}) {
  const { slug } = await params;
  const page = source.getPage(slug ? slug.join("/") : "");
  if (!page) notFound();

  const highlighter = await getHighlighter();
  const { code } = await processMdx(page.content, { highlighter });

  const { default: MDXContent } = await run(code, {
    ...(runtime as object),
    baseUrl: import.meta.url,
  } as Parameters<typeof run>[1]);

  return (
    <article>
      <h1>{page.frontmatter.title}</h1>
      <MDXContent />
    </article>
  );
}
```

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

### Initialize DocsSource in TypeScript

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/quickstart.mdx

Create a new instance of DocsSource to manage your documentation files. Specify the root directory for your docs and the base URL for accessing them.

```typescript
import { DocsSource } from "@document0/core";

const source = new DocsSource({
  rootDir: "./content/docs",
  baseUrl: "/docs",
});
```

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

### Load pages from file system

Source: https://github.com/doc0team/document0/blob/main/packages/core/README.md

Initialize a DocsSource instance to retrieve pages from a local directory.

```typescript
import { DocsSource } from "@document0/core";

const source = new DocsSource({
  rootDir: "./content/docs",
  baseUrl: "/docs",
});

const pages = source.getPages();
const page = source.getPage("getting-started");
```

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

### Set up Shiki Highlighter

Source: https://github.com/doc0team/document0/blob/main/packages/create-document0/template-nextjs/content/docs/installation.mdx

Configure the Shiki highlighter for syntax highlighting in your MDX content. This function initializes the highlighter with specified themes and languages.

```typescript
import { createHighlighter } from "shiki";

let highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = null;

export async function getHighlighter() {
  if (highlighter) return highlighter;
  highlighter = await createHighlighter({
    themes: ["github-dark"],
    langs: ["typescript", "javascript", "bash", "json"],
  });
  return highlighter;
}
```

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

### Initialize and Query DocsSource

Source: https://context7.com/doc0team/document0/llms.txt

Use DocsSource to scan content directories, retrieve pages by slug or URL, and manage cache invalidation.

```typescript
import { DocsSource } from "@document0/core";

// Initialize the source pointing to your content directory
const source = new DocsSource({
  rootDir: "./content/docs",
  baseUrl: "/docs",
  extensions: [".md", ".mdx"], // default
});

// Get all pages (cached after first call)
const pages = source.getPages();
console.log(`Found ${pages.length} documentation pages`);

// O(1) lookup by slug
const gettingStarted = source.getPage("getting-started");
if (gettingStarted) {
  console.log(gettingStarted.frontmatter.title); // "Getting Started"
  console.log(gettingStarted.url);               // "/docs/getting-started"
  console.log(gettingStarted.content);           // MDX content without frontmatter
}

// O(1) lookup by URL
const page = source.getPageByUrl("/docs/guides/installation");
if (page) {
  console.log(page.slug);        // "guides/installation"
  console.log(page.filePath);    // "./content/docs/guides/installation.mdx"
}

// Get the hierarchical page tree for navigation
const tree = source.getPageTree();

// Read _meta.json for a specific directory
const meta = source.getMeta("guides");
console.log(meta?.title);      // "Guides"
console.log(meta?.pages);      // ["introduction", "installation", "---", "advanced"]

// Invalidate cache when content changes (e.g., in dev mode)
source.invalidate();
```

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

### _meta.json Configuration

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/core.mdx

Control ordering, labels, and default open state for folders using _meta.json.

```APIDOC
## _meta.json Configuration

### Description
Control ordering, labels, and default open state for folders using `_meta.json`.

### Example
```json
{
  "title": "Guides",
  "pages": [
    "index",
    "--- Getting Started",
    "installation",
    "---",
    "advanced"
  ],
  "defaultOpen": true,
  "icon": "📖"
}
```

- Strings starting with `"--- "` become labelled separators
- `"---"` alone becomes an unlabelled divider
- Pages not listed are appended alphabetically
```

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

### Initialize Shiki Highlighter

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/mdc.mdx

Create and export a singleton highlighter instance to avoid expensive re-initialization.

```ts
import { createHighlighter } from "shiki";

let highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = null;

export async function getHighlighter() {
  if (highlighter) return highlighter;
  highlighter = await createHighlighter({
    themes: ["github-dark", "github-light"],
    langs: ["typescript", "javascript", "bash", "json", "vue", "css"],
  });
  return highlighter;
}
```

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

### Initialize Docs Source Loader

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/nextjs.mdx

Define the source loader to point to the local content directory.

```typescript
// lib/source.ts
import path from "node:path";
import { DocsSource } from "@document0/core";

const rootDir = path.join(process.cwd(), "content/docs");

export const source = new DocsSource({ rootDir, baseUrl: "/docs" });
```

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

### Create Shiki Highlighter

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/nextjs.mdx

Configure a singleton Shiki highlighter instance for syntax highlighting.

```typescript
// lib/highlighter.ts
import { createHighlighter } from "shiki";

let highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = null;

export async function getHighlighter() {
  if (highlighter) return highlighter;
  highlighter = await createHighlighter({
    themes: ["github-dark"],
    langs: ["typescript", "javascript", "bash", "json"],
  });
  return highlighter;
}
```

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

### List available registry items

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/cli.mdx

Display all items available in the document0 registry.

```bash
document0 list
```

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

### Add document0 Components via CLI

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/installation.mdx

Use the document0 CLI to add specific components like sidebars and search dialogs to your project.

```bash
npx document0 add document0/sidebar document0/search-dialog
```

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

### Define content structure

Source: https://github.com/doc0team/document0/blob/main/README.md

Organize documentation files within a content directory using _meta.json files for configuration.

```text
content/
└── docs/
    ├── _meta.json
    ├── index.mdx
    ├── getting-started.mdx
    └── guides/
        ├── _meta.json
        ├── index.mdx
        └── installation.mdx
```

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

### Compile MDX with Shiki

Source: https://context7.com/doc0team/document0/llms.txt

Initialize a Shiki highlighter and use processMdx to transform MDX content into executable JavaScript.

```typescript
import { processMdx } from "@document0/mdx";
import { createHighlighter } from "shiki";

// Create Shiki highlighter (reuse across requests)
const highlighter = await createHighlighter({
  themes: ["github-dark", "github-light"],
  langs: ["typescript", "javascript", "bash", "json", "tsx", "jsx"],
});

const mdxSource = `--- 
title: My Component Guide
description: Learn how to build components
---

# Introduction

Here's a code example:

\`\`\`typescript
function greet(name: string): string {
  return \`Hello, \${name}!\`;
}

console.log(greet("World"));
\`\`\`
`
```

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

### Create llms.txt route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/llms-txt.mdx

Use this route to serve a concise index of your documentation for AI tools.

```ts
// app/llms.txt/route.ts
import { createLlmsTxtRoute } from "@document0/core";
import { source } from "@/lib/source";

export const { GET } = createLlmsTxtRoute(source, {
  title: "My Project",
  description: "Documentation for My Project",
  baseUrl: "https://docs.example.com",
});
```

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

### Initialize Shiki highlighter

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/mdx.mdx

Create and cache a Shiki highlighter instance to reuse across requests for better performance.

```ts
import { createHighlighter } from "shiki";

let highlighter: Awaited<ReturnType<typeof createHighlighter>> | null = null;

export async function getHighlighter() {
  if (highlighter) return highlighter;
  highlighter = await createHighlighter({
    themes: ["github-dark", "github-light"],
    langs: ["typescript", "javascript", "bash", "json", "css"],
  });
  return highlighter;
}
```

```ts
const highlighter = await getHighlighter();
const { code, toc } = await processMdx(raw, { highlighter, theme: "github-dark" });
```

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

### Create llms-full.txt route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/llms-txt.mdx

Use this route to serve the complete content of your documentation for AI tools.

```ts
// app/llms-full.txt/route.ts
import { createLlmsFullTxtRoute } from "@document0/core";
import { source } from "@/lib/source";

export const { GET } = createLlmsFullTxtRoute(source, {
  title: "My Project",
  description: "Documentation for My Project",
  baseUrl: "https://docs.example.com",
});
```

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

### Configure _meta.json

Source: https://github.com/doc0team/document0/blob/main/README.md

Define page ordering, labels, and separators in a directory.

```json
{
  "title": "Guides",
  "pages": [
    "introduction",
    "installation",
    "--- ",
    "--- Advanced",
    "configuration",
    "deployment"
  ],
  "defaultOpen": true
}
```

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

### Create llms.txt route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/core.mdx

Serves a concise index of all pages. Requires a source object and configuration for title, description, and base URL.

```ts
import { createLlmsTxtRoute } from "@document0/core";

// app/llms.txt/route.ts
export const { GET } = createLlmsTxtRoute(source, {
  title: "My Docs",
  description: "Documentation for my project",
  baseUrl: "https://docs.example.com",
});
```

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

### Configure Shiki syntax highlighting

Source: https://github.com/doc0team/document0/blob/main/packages/mdx/README.md

Integrate Shiki highlighter instance into the MDX processing pipeline.

```ts
import { processMdx } from "@document0/mdx";
import { createHighlighter } from "shiki";

const highlighter = await createHighlighter({
  themes: ["github-dark", "github-light"],
  langs: ["typescript", "javascript", "bash", "json"],
});

const { code, frontmatter, toc } = await processMdx(source, {
  highlighter,
  defaultLanguage: "plaintext",
});
```

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

### Create llms-full.txt route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/core.mdx

Serves the complete content of every page concatenated into a single text file.

```ts
import { createLlmsFullTxtRoute } from "@document0/core";

// app/llms-full.txt/route.ts
export const { GET } = createLlmsFullTxtRoute(source, {
  title: "My Docs",
  description: "Documentation for my project",
  baseUrl: "https://docs.example.com",
});
```

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

### Configure Vue Router

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/vue.mdx

Set up Vue Router to handle documentation routes.

```typescript
// src/main.ts
import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import "./globals.css";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", redirect: "/docs" },
    {
      path: "/docs/:slug(.*)*",
      component: () => import("./pages/DocPage.vue"),
    },
  ],
});

const app = createApp(App);
app.use(router);
app.mount("#app");
```

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

### Manage Document0 Plugins via CLI

Source: https://context7.com/doc0team/document0/llms.txt

Use the document0 CLI to add, update, list, and search for plugins in the registry. You can also specify a custom registry using an environment variable.

```bash
# Install plugins from the registry
document0 add document0/sidebar
document0 add document0/admonitions fumadocs/codeblock

# Update installed plugins to latest versions
document0 update
document0 update document0/sidebar

# List all available plugins
document0 list

# Search plugins by name or description
document0 search sidebar
document0 search syntax highlighting

# Environment variable for custom registry
DOCUMENT0_REGISTRY=https://custom-registry.com document0 list
```

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

### Project structure

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/create.mdx

The directory layout generated by the scaffold command.

```text
my-docs/
├── app/
│   ├── layout.tsx
│   ├── page.tsx                     ← redirects to /docs
│   └── docs/
│       ├── layout.tsx               ← sidebar + main layout
│       └── [[...slug]]/
│           └── page.tsx             ← MDX rendering page
├── components/
│   ├── sidebar.tsx
│   ├── breadcrumbs.tsx
│   ├── page-navigation.tsx
│   ├── table-of-contents.tsx
│   └── mdx-components.tsx
├── content/
│   └── docs/
│       ├── _meta.json
│       ├── index.mdx
│       ├── installation.mdx
│       ├── configuration.mdx
│       └── guides/
│           └── index.mdx
├── lib/
│   ├── source.ts
│   ├── highlighter.ts
│   └── utils.ts
├── next.config.ts
├── tsconfig.json
└── package.json
```

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

### Configure document0 Source

Source: https://github.com/doc0team/document0/blob/main/packages/create-document0/template-nextjs/content/docs/installation.mdx

Set up the document0 source configuration in TypeScript. This defines the root directory for your docs and the base URL for accessing them.

```typescript
import path from "node:path";
import { DocsSource, buildPageTree } from "@document0/core";

const rootDir = path.join(process.cwd(), "content/docs");

export const source = new DocsSource({ rootDir, baseUrl: "/docs" });

export function getPageTree() {
  return buildPageTree(source.getPages(), rootDir);
}
```

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

### Integrate OpenAPI Specifications

Source: https://context7.com/doc0team/document0/llms.txt

Load OpenAPI 3.x specifications to generate documentation trees, search indexes, and LLM-friendly text representations.

```typescript
import {
  createOpenAPISource,
  buildOpenAPITree,
  buildOpenAPISearchIndex,
  generateOpenAPILlmsTxt,
} from "@document0/core";

// Load OpenAPI spec from file, URL, or object
const operations = await createOpenAPISource("./openapi.json", {
  baseUrl: "/api-reference",
});

// Or from URL
const opsFromUrl = await createOpenAPISource(
  "https://api.example.com/openapi.json",
  { baseUrl: "/api" }
);

// Each operation contains detailed information
for (const op of operations) {
  console.log(`${op.method} ${op.path}`);
  console.log(`  Summary: ${op.summary}`);
  console.log(`  Tags: ${op.tags.join(", ")}`);
  console.log(`  URL: ${op.url}`);
  console.log(`  Deprecated: ${op.deprecated}`);

  for (const param of op.parameters) {
    console.log(`  Param: ${param.name} (${param.in})${param.required ? " *" : ""}`);
  }

  if (op.requestBody) {
    console.log(`  Request body: ${op.requestBody.required ? "required" : "optional"}`);
  }

  for (const resp of op.responses) {
    console.log(`  Response ${resp.status}: ${resp.description}`);
  }
}

// Build sidebar tree grouped by tags
const apiTree = buildOpenAPITree(operations);
// Returns: [{ type: "separator", name: "Users" }, { type: "page", name: "GET /users", ... }, ...]

// Build search index
const searchResults = buildOpenAPISearchIndex(operations);
// Returns: [{ title: "List Users", description: "GET /users", url: "/api-reference/list-users", score: 0 }, ...]

// Generate LLM-friendly text
const apiLlmsTxt = generateOpenAPILlmsTxt(operations, {
  baseUrl: "https://docs.example.com",
  title: "API Reference",
});
```

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

### Create raw markdown page route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/llms-txt.mdx

Use this route to serve raw markdown content for individual documentation pages.

```ts
// app/api/page/[...slug]/route.ts
import { createMdxPageRoute } from "@document0/core";
import { source } from "@/lib/source";

export const { GET } = createMdxPageRoute(source);
```

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

### Configure Source Loader

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/vue.mdx

Define the file-system source and page tree builder for document0.

```typescript
// server/source.ts
import path from "node:path";
import { DocsSource, buildPageTree } from "@document0/core";

const rootDir = path.join(process.cwd(), "content/docs");

export const source = new DocsSource({ rootDir, baseUrl: "/docs" });

export function getPageTree() {
  return buildPageTree(source.getPages(), rootDir);
}
```

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

### DocsSource Configuration

Source: https://github.com/doc0team/document0/blob/main/packages/template-vue/content/docs/configuration.mdx

Configure the source directory, base URL, and file extensions for Document0 content.

```APIDOC
## DocsSource Configuration

### Description
Configure the source directory, base URL, and file extensions for Document0 content.

### Parameters
#### Request Body
- **rootDir** (string) - Required - Root directory to scan for content files
- **baseUrl** (string) - Optional - URL prefix for all pages (default: "/docs")
- **extensions** (string[]) - Optional - File extensions to include (default: [".md", ".mdx"])

### Request Example
```json
{
  "rootDir": "./content/docs",
  "baseUrl": "/docs",
  "extensions": [".md", ".mdx"]
}
```
```

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

### Configure _meta.json

Source: https://github.com/doc0team/document0/blob/main/packages/core/README.md

Define ordering and naming for pages within a directory using a meta file.

```json
{
  "title": "Getting Started",
  "pages": ["introduction", "installation", "--- Usage", "quickstart"],
  "defaultOpen": true
}
```

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

### Define Plugin Directory Structure

Source: https://github.com/doc0team/document0/blob/main/CONTRIBUTING-PLUGINS.md

The required file layout for a new plugin within the registry.

```text
registry/plugins/my-plugin/
  registry.json   # metadata
  index.ts        # source code (self-contained)
```

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

### Implement Navigation Utilities

Source: https://context7.com/doc0team/document0/llms.txt

Use these functions to generate breadcrumbs, handle pagination, and manage active states in a sidebar navigation tree.

```typescript
import {
  getBreadcrumbs,
  getPageNeighbours,
  isActiveOrAncestor,
  flattenPages,
  findNode,
} from "@document0/core";

const tree = source.getPageTree();
const currentUrl = "/docs/guides/installation";

// Get breadcrumb trail
const breadcrumbs = getBreadcrumbs(tree, currentUrl);
// [{ name: "Docs", url: "/docs" }, { name: "Guides", url: "/docs/guides" }, { name: "Installation", url: "/docs/guides/installation" }]

breadcrumbs.forEach((crumb, i) => {
  const isLast = i === breadcrumbs.length - 1;
  console.log(`${crumb.name}${isLast ? "" : " > "}`);
});

// Get previous/next pages for pagination
const { previous, next } = getPageNeighbours(tree, currentUrl);
if (previous) {
  console.log(`← ${previous.name}: ${previous.url}`);
}
if (next) {
  console.log(`→ ${next.name}: ${next.url}`);
}

// Check if a sidebar item should be highlighted/expanded
for (const node of tree) {
  if (isActiveOrAncestor(node, currentUrl)) {
    console.log(`${node.type === "folder" ? node.name : node.name} is active or contains active page`);
  }
}

// Flatten tree to get all pages in order
const allPages = flattenPages(tree);
console.log(`Total navigable pages: ${allPages.length}`);

// Find a specific node by URL
const node = findNode(tree, "/docs/guides");
if (node) {
  console.log(`Found: ${node.type}`);
}
```

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

### Extend Document0 with Custom Plugins

Source: https://context7.com/doc0team/document0/llms.txt

Define custom plugins to transform pages, trees, or MDX results. Use built-in plugins like admonitions or create your own for features like reading time.

```typescript
import { DocsSource } from "@document0/core";
import { processMdx, admonitions } from "@document0/mdx";
import type { Document0Plugin } from "@document0/core";

// Built-in admonitions plugin for GitHub-style callouts
const { code } = await processMdx(source, {
  plugins: [admonitions({ component: "Callout" })],
  highlighter,
});

// Custom plugin example: add reading time to pages
const readingTimePlugin: Document0Plugin = {
  name: "reading-time",

  // Transform pages after loading
  transformPages(pages) {
    return pages.map((page) => ({
      ...page,
      frontmatter: {
        ...page.frontmatter,
        readingTime: Math.ceil(page.content.split(/\s+/).length / 200),
      },
    }));
  },

  // Transform the page tree
  transformTree(tree) {
    // Add custom nodes, reorder, etc.
    return tree;
  },

  // Add remark/rehype plugins
  remarkPlugins: [myCustomRemarkPlugin],
  rehypePlugins: [myCustomRehypePlugin],

  // Transform MDX compilation result
  transformResult(result, context) {
    return {
      ...result,
      customData: extractCustomData(context.content),
    };
  },
};

// Use with DocsSource
const source = new DocsSource({
  rootDir: "./content/docs",
  plugins: [readingTimePlugin],
});

// Use with processMdx
const result = await processMdx(mdxSource, {
  plugins: [readingTimePlugin, admonitions()],
  highlighter,
});
```

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

### Build Navigation Structure

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/quickstart.mdx

Generate the navigation tree for your documentation site using `getPageTree`. Helper functions are available to create breadcrumbs and determine previous/next page links.

```typescript
const tree = source.getPageTree();        // sidebar tree
const crumbs = getBreadcrumbs(tree, url); // breadcrumbs
const { previous, next } = getPageNeighbours(tree, url);
```

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

### Search registry items

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/cli.mdx

Search the registry for items by name, tag, or description.

```bash
document0 search sidebar
document0 search navigation
```

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

### Add llms.txt Route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/nextjs.mdx

Optional route to provide an llms.txt file for AI context.

```typescript
// app/llms.txt/route.ts
import { createLlmsTxtRoute } from "@document0/core";
import { source } from "@/lib/source";

export const { GET } = createLlmsTxtRoute(source, {
  title: "My Docs",
  description: "Documentation for my project",
  baseUrl: "https://docs.example.com",
});
```

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

### Create MDX page route

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/core.mdx

Serves raw markdown content for a single page by slug.

```ts
import { createMdxPageRoute } from "@document0/core";

// app/api/page/[...slug]/route.ts
export const { GET } = createMdxPageRoute(source);
```

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

### Apply Highlighter to Processor

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/mdc.mdx

Pass the initialized highlighter instance to the processor options.

```ts
const highlighter = await getHighlighter();
const { html, toc } = await processMdcToHtml(raw, { highlighter });
```

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

### Create Vite API Plugin

Source: https://github.com/doc0team/document0/blob/main/apps/docs/content/docs/vue.mdx

Implement a Vite plugin to serve documentation data via API endpoints during development.

```typescript
// server/api.ts
import fs from "node:fs";
import { source, getPageTree } from "./source";
import { getHighlighter } from "./highlighter";
import { processMdcToHtml } from "@document0/mdc";
import { getBreadcrumbs, getPageNeighbours } from "@document0/core";
import type { Plugin } from "vite";

async function getPage(slug: string) {
  const page = source.getPage(slug);
  if (!page) return null;

  const raw = fs.readFileSync(page.filePath, "utf-8");
  const highlighter = await getHighlighter();
  const { html, toc } = await processMdcToHtml(raw, { highlighter });

  const tree = getPageTree();
  const breadcrumbs = getBreadcrumbs(tree, page.url);
  const { previous, next } = getPageNeighbours(tree, page.url);

  return {
    title: page.frontmatter.title,
    description: page.frontmatter.description,
    html,
    toc,
    breadcrumbs,
    previous,
    next,
  };
}

export function document0ApiPlugin(): Plugin {
  return {
    name: "document0-api",
    configureServer(server) {
      server.middlewares.use(async (req, res, next) => {
        if (req.url === "/api/tree") {
          res.setHeader("Content-Type", "application/json");
          res.end(JSON.stringify(getPageTree()));
          return;
        }

        const match = req.url?.match(/^\/api\/page\/(.*)$/);
        if (match) {
          const data = await getPage(decodeURIComponent(match[1]));
          if (!data) {
            res.statusCode = 404;
            res.end(JSON.stringify({ error: "Not found" }));
            return;
          }
          res.setHeader("Content-Type", "application/json");
          res.end(JSON.stringify(data));
          return;
        }

        next();
      });
    },
  };
}
```