Tutorials

Multi-Tab Sites

Guides, API references and code references side by side in one site.

A site can have several tabs, each with its own source: Markdown guides, an OpenAPI spec, an MCP snapshot, Doxygen XML, a Go module or Rust crates. Tabs sit in the header, and each publishes beneath its own path.

Sources

SourceFunctionFor
Markdownmarkdown({ groups })Guides, tutorials, concepts
OpenAPIopenapi("./openapi.yaml")An HTTP API's reference
MCPmcp("./mcp.json")An MCP server's tools, resources and prompts
Doxygendoxygen({ xml: "./xml" })A C or C++ library's reference
Gogodoc(".")A Go module's packages and symbols
Rustrustdoc({ manifest: "./Cargo.toml" })A Rust crate's reference

A five-tab site

import { defineConfig, godoc, markdown, openapi } from "sourcey";

export default defineConfig({
  name: "My Platform",
  navigation: {
    tabs: [
      {
        tab: "Documentation",
        slug: "",
        source: markdown({
          groups: [
            { group: "Getting Started", pages: ["introduction", "quickstart"] },
            { group: "Concepts", pages: ["architecture", "authentication"] },
          ],
        }),
      },
      {
        tab: "Guides",
        source: markdown({
          groups: [
            { group: "Tutorials", pages: ["guide-setup", "guide-deployment"] },
          ],
        }),
      },
      { tab: "API Reference", slug: "api", source: openapi("./openapi.yaml") },
      {
        tab: "Go API",
        slug: "go",
        source: godoc({ module: ".", packages: ["./..."] }),
      },
      {
        tab: "Changelog",
        source: markdown({
          groups: [{ group: "Releases", pages: ["CHANGELOG"] }],
        }),
      },
    ],
  },
});

A page named CHANGELOG.md is read as a changelog, each release with its own anchor and its own entry in search.

Paths

Each tab publishes beneath its slug:

{ tab: "Documentation", slug: "" }

Its pages sit at the site's root: /introduction, /quickstart. Give the main tab this slug to keep its addresses short.

{ tab: "Guides" }

Without a slug, the tab's name is slugified: /guides/guide-setup.

{ tab: "API Reference", slug: "api" }

A slug of your own, /api/ rather than /api-reference/.

Groups head the sidebar's sections, in the order you list them, and each lists its pages in order. See Navigation for nested groups, section pages, links and links between tabs.

In the wild

The Cheese Store demo has guides, an OpenAPI reference, an MCP reference and a changelog. The Scafld Go API is a Go tab built from package comments and exported symbols.