Configuration

Everything is in one file — docs.json at the root of your project.

Branding

Site name

{
  "name": "Acme Docs"
}

Logo

{
  "logo": {
    "light": "/images/logo-light.svg",
    "dark": "/images/logo-dark.svg"
  }
}

Put logo files in /images at your project root.

Favicon

{
  "favicon": "/images/favicon.svg"
}

SVG favicons scale to any size and work in dark mode.

Colors

{
  "colors": {
    "primary": "#6366F1",
    "light": "#818CF8",
    "dark": "#4F46E5"
  }
}

Theme

{
  "theme": "jam"
}

Navigation

Tabs and groups

The sidebar is tabs containing groups of pages:

{
  "navigation": {
    "tabs": [
      {
        "tab": "Guides",
        "icon": "book-open",
        "groups": [
          {
            "group": "Get Started",
            "pages": ["introduction", "quickstart"]
          },
          {
            "group": "Advanced",
            "pages": ["guides/webhooks", "guides/custom-domain"]
          }
        ]
      }
    ]
  }
}

Page paths are relative to the project root, without .mdx.

Navbar

{
  "navbar": {
    "primary": {
      "type": "button",
      "label": "Dashboard",
      "href": "https://app.acme.com"
    },
    "links": [
      { "label": "GitHub", "href": "https://github.com/acme/sdk" },
      { "label": "Blog", "href": "https://acme.com/blog" }
    ]
  }
}

External links in sidebar

{
  "group": "Resources",
  "pages": [
    { "title": "GitHub", "href": "https://github.com/acme" },
    { "title": "Status", "href": "https://status.acme.com" }
  ]
}

Redirects

When you move or rename pages, add redirects so old URLs keep working:

{
  "redirects": [
    { "from": "/getting-started", "to": "/quickstart" },
    { "from": "/reference/auth", "to": "/api-reference" }
  ]
}

Custom CSS

{
  "customCss": "/styles/custom.css"
}