> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pocketsflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Docs configuration (docs.json)

> How the Pocketsflow docs site is configured — the docs.json schema, navigation, theming, and where to change things.

The Pocketsflow documentation site is built with [Mintlify](https://mintlify.com).
Every setting — navigation, theme, logo, footer — lives in a single
`docs.json` file at the docs root (`apps/docs/docs.json`). This page documents
the structure actually in use so contributors can add pages and adjust the site
confidently.

<Info>
  This is a **contributor reference** for editing these docs, not a product
  feature. If you're looking for your Pocketsflow **account** settings, see
  [Account & security](/operations/account-and-security).
</Info>

## Where things live

```
apps/docs/
├── docs.json          # all configuration (this page)
├── index.mdx          # docs home
├── quickstart.mdx
├── buyers/            # buyer guides
├── selling/           # creator selling guides
├── integrations/      # integration guides
├── api-reference/     # API reference pages
├── api-webhooks/      # webhooks docs
├── ai-tools/          # AI editor setup
├── essentials/        # these contributor pages
└── resources/         # policies & support
```

## Top-level keys

<ResponseField name="$schema" type="string">
  Points at the Mintlify schema for editor validation:
  `https://mintlify.com/docs.json`.
</ResponseField>

<ResponseField name="theme" type="string">
  The Mintlify theme. This site uses `mint`.
</ResponseField>

<ResponseField name="name" type="string" required>
  The site name shown in the title. Here: `Pocketsflow Docs`.
</ResponseField>

<ResponseField name="colors" type="object" required>
  Brand colors. Keep these on the Pocketsflow accent:

  ```json theme={null}
  "colors": {
    "primary": "#635BFF",
    "light": "#8B85FF",
    "dark": "#4B45D1"
  }
  ```

  <Warning>
    `primary` must stay **`#635BFF`** — the Pocketsflow brand accent. Don't
    change it without a brand decision.
  </Warning>
</ResponseField>

<ResponseField name="favicon" type="string">
  Path to the favicon, e.g. `/favicon.svg`.
</ResponseField>

<ResponseField name="logo" type="object">
  Light and dark logo paths:

  ```json theme={null}
  "logo": { "light": "/logo/light.svg", "dark": "/logo/dark.svg" }
  ```
</ResponseField>

<ResponseField name="navigation" type="object" required>
  The site's structure — tabs, groups, and pages. See
  [Navigation](#navigation) below.
</ResponseField>

<ResponseField name="navbar" type="object">
  Top-bar links and the primary call-to-action button:

  ```json theme={null}
  "navbar": {
    "links": [
      { "label": "Pricing", "href": "https://www.pocketsflow.com/pricing" },
      { "label": "Support", "href": "https://www.pocketsflow.com/support" }
    ],
    "primary": { "type": "button", "label": "Sign in", "href": "https://app.pocketsflow.com" }
  }
  ```
</ResponseField>

<ResponseField name="contextual" type="object">
  The "copy / open in AI tool" options on each page. This site enables:
  `copy`, `view`, `chatgpt`, `claude`, `perplexity`, `mcp`, `cursor`, `vscode`.
</ResponseField>

<ResponseField name="footer" type="object">
  Footer socials, e.g. `{ "socials": { "x": "https://x.com/pocketsflow" } }`.
</ResponseField>

## Navigation

Navigation is a set of **tabs**, each containing **groups**, each containing an
ordered list of **pages** (paths relative to the docs root, without `.mdx`).

```json theme={null}
"navigation": {
  "tabs": [
    {
      "tab": "Guides",
      "groups": [
        {
          "group": "For buyers",
          "pages": [
            "buyers/overview",
            "buyers/how-to-purchase",
            "buyers/managing-subscriptions"
          ]
        }
      ]
    }
  ]
}
```

<ResponseField name="tab" type="string" required>
  The tab label shown in the top navigation (e.g. `Guides`, `Integrations`,
  `Resources`).
</ResponseField>

<ResponseField name="group" type="string" required>
  A section heading within a tab's sidebar (e.g. `For buyers`).
</ResponseField>

<ResponseField name="pages" type="string[]" required>
  Ordered page paths relative to the docs root. `buyers/overview` →
  `buyers/overview.mdx`. Order here is the sidebar order.
</ResponseField>

### Adding a page

<Steps>
  <Step title="Create the MDX file">
    Add `your-section/your-page.mdx` with valid frontmatter (see
    [Writing pages](#page-frontmatter)).
  </Step>

  <Step title="Register it in docs.json">
    Add its path to the right group's `pages` array, in the position you want it
    to appear.
  </Step>

  <Step title="Preview">
    Run the local preview and confirm it shows in the sidebar and renders.
  </Step>
</Steps>

<Warning>
  A page that isn't listed in any `pages` array is **orphaned** — reachable by
  direct URL but missing from the sidebar. Always register new pages.
</Warning>

## Global anchors

`navigation.global.anchors` renders persistent links (with icons) across the
whole site:

```json theme={null}
"global": {
  "anchors": [
    { "anchor": "Pocketsflow", "href": "https://www.pocketsflow.com", "icon": "globe" },
    { "anchor": "Status", "href": "https://app.pocketsflow.com/status", "icon": "signal" },
    { "anchor": "Blog", "href": "https://www.pocketsflow.com/blog", "icon": "newspaper" }
  ]
}
```

## Page frontmatter

Every MDX page starts with YAML frontmatter:

```yaml theme={null}
---
title: 'Clear, specific page title'
description: 'One concise sentence for SEO and the sidebar/preview.'
icon: 'gear'   # optional Font Awesome icon
---
```

## Validating your changes

* Preview locally with the Mintlify CLI: `mint dev` (installed via
  `npm i -g mint`), served at `http://localhost:3000`.
* Check for broken links with `mint broken-links`.
* Ensure `docs.json` remains **valid JSON** (a trailing comma will break the
  build).

## Related topics

* [Images & embeds](/essentials/images)
* [Code blocks](/essentials/code)