Every documentation site needs a docs.json file. This file controls everything from styling to navigation.

​
Quick Start

Here’s a simple example of a docs.json file to get you started:

{
  "name": "My Project",
  "logo": "/logo.png",
  "theme": "mint",
  "colors": {
    "primary": "#0D9373"
  },
  "navigation": [
    {
      "group": "Getting Started",
      "pages": ["introduction", "quickstart"]
    }
  ]
}

​
Basic Settings

Let’s go through the essential settings you’ll need for any documentation site.

{
  "name": "My Project",
  "logo": "/logo.png"
}

You can also use different logos for light and dark mode:

{
  "logo": {
    "light": "/logo-light.png",
    "dark": "/logo-dark.png"
  }
}

​
Colors and Theme

Choose from our pre-built themes:

  • mint - Clean and modern (default)
  • maple - Warm and inviting
  • palm - Bold and vibrant
{
  "theme": "mint",
  "colors": {
    "primary": "#0D9373"
  }
}

Use any hex color code for your primary color. This will be used for buttons, links, and accents throughout your site.

Group your pages into logical sections:

{
  "navigation": [
    {
      "group": "Getting Started",
      "pages": ["introduction", "quickstart"]
    },
    {
      "group": "Core Concepts",
      "pages": ["concepts/pages", "concepts/components"]
    }
  ]
}

​
Advanced Customization

​
Custom Fonts

Add your own fonts to match your brand:

{
  "fonts": {
    "body": {
      "family": "Inter",
      "source": "https://fonts.googleapis.com/css2?family=Inter&display=swap"
    },
    "heading": {
      "family": "Poppins",
      "source": "https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
    }
  }
}

Add useful links to your navigation:

{
  "navbar": {
    "links": [
      {
        "label": "Blog",
        "href": "https://myblog.com"
      }
    ],
    "primary": {
      "type": "button",
      "label": "Get Started",
      "href": "/quickstart"
    }
  }
}

Add social links and organized footer content:

{
  "footer": {
    "socials": {
      "github": "https://github.com/myproject",
      "discord": "https://discord.gg/myproject"
    },
    "links": [
      {
        "header": "Product",
        "items": [
          {
            "label": "Features",
            "href": "/features"
          }
        ]
      }
    ]
  }
}

​
Analytics and Integrations

Add popular analytics tools with simple configurations:

{
  "integrations": {
    "ga4": {
      "measurementId": "G-XXXXXXXXXX"
    }
  }
}

We support many analytics platforms including Google Analytics, Segment, Amplitude, and more.

​
Complete Reference

For a complete list of all available settings, expand the sections below:

​
Customization Options

​
theme
required

Choose from: mint, maple, palm, willow, linden, almond

​
name
string
required

Your project, organization, or product name

​
colors
object
required

​
Structure Settings

​
navigation
object
required

​
Integration Options

​
integrations
object

​
Validation

Add this line to the top of your docs.json for automatic validation:

{
  "$schema": "https://mintlify.com/docs.json"
}

This will give you autocomplete and error checking in most code editors!