@opentf/web-docs

The documentation theme that powers this very site. It layers a themed shell — navbar, sidebar, table of contents, breadcrumbs, prev/next — over your MDX content, and generates the navigation tree from the file system at build time.

Shell

bun add @opentf/web-docs

A package, not a fork

Your docs site is an ordinary OTF Web app that imports web-docs. The same compiler, router, and SSG build it — there is no separate documentation runtime.

Content is MDX

.mdx files are routes: Markdown plus JSX components. Each page starts with frontmatter; title feeds the sidebar, breadcrumbs, and <title>.

MDX

---
title: Reactivity
description: Signal-based state.
---

# Reactivity

Prose, `inline code`, and components side by side.

import { Callout } from "@opentf/web-docs";

<Callout type="tip">Mix components into Markdown freely.</Callout>

Fenced code is highlighted at build time, and every code block gets a copy button automatically.

The shell

Wrap your docs routes in DocsLayout. That's the whole layout — it sources the generated sidebar itself:

JSX

// app/docs/layout.jsx
import { DocsLayout } from "@opentf/web-docs";
import config from "../../otfw.config.js";

export default function Layout(props) {
  return (
    <DocsLayout config={config.docs}>
      {props.children}
    </DocsLayout>
  );
}

The build plugin scans every top-level folder under app/ and resolves @opentf/web-docs/nav to a { "/<dir>": tree } map; DocsLayout reads it and shows the branch for the current route. So any folder with a layout like this becomes its own documentation section — app/api → /api, with its own sidebar — and they all share the same traits (last updated, search, prev/next).

Continue with Components and Configuration.