Settings

Learn how to configure your documentation settings

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.

Project Name and Logo

{
  "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.

Navigation Structure

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"
    }
  }
}

Navigation Extras

Add useful links to your navigation:

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

Footer Configuration

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

Show Colors

primary · string · required

Primary color in hex format (e.g., “#0D9373”)

light · string

Light mode accent color

dark · string

Dark mode accent color

Structure Settings

navigation · object · required

Show Navigation

pages · array

List of page paths or groups

groups · array

Organized sections of pages

Integration Options

integrations · object

Show Available Integrations

ga4

Google Analytics 4

segment

Segment Analytics

intercom

Intercom Chat

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!