README Documentation

Memo:The missing online resume maker

0 stars JavaScript JavaScript 1 file · ~13,146 tokens
RAW Doc

1. Project Overview & Quickstart (Tracer-Cloud/README)

README

:memo:The missing online resume maker

Repository Details

Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.

2. Official Technical Reference & Guides (Tracer-Cloud/docs)

File: README.md

Mintlify Starter Kit

Use the starter kit to get your docs deployed and ready to customize.

Click the green Use this template button at the top of this repo to copy the Mintlify starter kit. The starter kit contains examples with

  • Guide pages
  • Navigation
  • Customizations
  • API reference pages
  • Use of popular components

Follow the full quickstart guide

AI-assisted writing

Set up your AI coding tool to work with Mintlify:

bash
npx skills add https://mintlify.com/docs

This command installs Mintlify's documentation skill for your configured AI tools like Claude Code, Cursor, Windsurf, and others. The skill includes component reference, writing standards, and workflow guidance.

See the AI tools guides for tool-specific setup.

Development

Install the Mintlify CLI to preview your documentation changes locally. To install, use the following command:

text
npm i -g mint

Run the following command at the root of your documentation, where your docs.json is located:

text
mint dev

View your local preview at http://localhost:3000.

Publishing changes

Install our GitHub app from your dashboard to propagate changes from your repo to your deployment. Changes are deployed to production automatically after pushing to the default branch.

Need help?

Troubleshooting

  • If your dev environment isn't running: Run mint update to ensure you have the most recent version of the CLI.
  • If a page loads as a 404: Make sure you are running in a folder with a valid docs.json.

Resources

File: AGENTS.md

First-time setup: Customize this file for your project. Prompt the user to customize this file for their project.
For Mintlify product knowledge (components, configuration, writing standards),
install the Mintlify skill: npx skills add https://mintlify.com/docs

Documentation project instructions

About this project

  • This is a documentation site built on Mintlify
  • Pages are MDX files with YAML frontmatter
  • Configuration lives in docs.json
  • Run mint dev to preview locally
  • Run mint broken-links to check links

Terminology

{/* Add product-specific terms and preferred usage /}
{/ Example: Use "workspace" not "project", "member" not "user" */}

Style preferences

{/* Add any project-specific style rules below */}

  • Use active voice and second person ("you")
  • Keep sentences concise — one idea per sentence
  • Use sentence case for headings
  • Bold for UI elements: Click Settings
  • Code formatting for file names, commands, paths, and code references

Content boundaries

{/* Define what should and shouldn't be documented /}
{/ Example: Don't document internal admin features */}

File: CONTRIBUTING.md

Customize this file: Tailor this template to your project by noting specific contribution types you're looking for, adding a Code of Conduct, or adjusting the writing guidelines to match your style.

Contribute to the documentation

Thank you for your interest in contributing to our documentation! This guide will help you get started.

How to contribute

Option 1: Edit directly on GitHub

  1. Navigate to the page you want to edit
  2. Click the "Edit this file" button (the pencil icon)
  3. Make your changes and submit a pull request

Option 2: Local development

  1. Fork and clone this repository
  2. Install the Mintlify CLI: npm i mint
  3. Create a branch for your changes
  4. Make changes
  5. Navigate to the docs directory and run mint dev
  6. Preview your changes at http://localhost:3000
  7. Commit your changes and submit a pull request

For more details on local development, see our development guide.

Writing guidelines

  • Use active voice: "Run the command" not "The command should be run"
  • Address the reader directly: Use "you" instead of "the user"
  • Keep sentences concise: Aim for one idea per sentence
  • Lead with the goal: Start instructions with what the user wants to accomplish
  • Use consistent terminology: Don't alternate between synonyms for the same concept
  • Include examples: Show, don't just tell

File: development.mdx

title: 'Development' icon: 'terminal'

Prerequisites:

  • Node.js version 19 or higher
  • A docs repository with a docs.json file

Follow these steps to install and run Mintlify on your operating system.

bash
npm i -g mint

Navigate to your docs directory where your docs.json file is located, and run the following command:

bash
mint dev

A local preview of your documentation will be available at http://localhost:3000.

Custom ports

By default, Mintlify uses port 3000. You can customize the port Mintlify runs on by using the --port flag. For example, to run Mintlify on port 3333, use this command:

bash
mint dev --port 3333

If you attempt to run Mintlify on a port that's already in use, it will use the next available port:

md
Port 3000 is already in use. Trying 3001 instead.

Mintlify versions

Please note that each CLI release is associated with a specific version of Mintlify. If your local preview does not align with the production version, please update the CLI:

bash
npm mint update

The CLI can assist with validating links in your documentation. To identify any broken links, use the following command:

bash
mint broken-links

Deployment

If the deployment is successful, you should see the following:

Code formatting

We suggest using extensions on your IDE to recognize and format MDX. If you're a VSCode user, consider the MDX VSCode extension for syntax highlighting, and Prettier for code formatting.

Troubleshooting

text
This may be due to an outdated version of node. Try the following:
1. Remove the currently-installed version of the CLI: `npm remove -g mint`
2. Upgrade to Node v19 or higher.
3. Reinstall the CLI: `npm i mint`
text
Solution: Go to the root of your device and delete the `~/.mintlify` folder. Then run `mint dev` again.

Curious about what changed in the latest CLI version? Check out the CLI changelog.

File: docs.json

{
"$schema": "https://mintlify.com/docs.json",
"theme": "mint",
"name": "Mintlify Starter Kit",
"colors": {
"primary": "#16A34A",
"light": "#07C983",
"dark": "#15803D"
},
"favicon": "/favicon.svg",
"navigation": {
"tabs": [
{
"tab": "Guides",
"groups": [
{
"group": "Getting started",
"pages": [
"index",
"quickstart",
"development"
]
},
{
"group": "Customization",
"pages": [
"essentials/settings",
"essentials/navigation"
]
},
{
"group": "Writing content",
"pages": [
"essentials/markdown",
"essentials/code",
"essentials/images",
"essentials/components",
"essentials/reusable-snippets"
]
},
{
"group": "Agent ready",
"pages": [
"agent-ready/prompt",
"agent-ready/visibility",
"agent-ready/contextual",
"ai-tools/cursor",
"ai-tools/claude-code",
"ai-tools/windsurf"
]
}
]
},
{
"tab": "API reference",
"groups": [
{
"group": "API documentation",
"pages": [
"api-reference/introduction"
]
},
{
"group": "Endpoint examples",
"pages": [
"api-reference/endpoint/get",
"api-reference/endpoint/create",
"api-reference/endpoint/delete",
"api-reference/endpoint/webhook"
]
}
]
}
],
"global": {
"anchors": [
{
"anchor": "Documentation",
"href": "https://mintlify.com/docs",
"icon": "book-open-cover"
},
{
"anchor": "Blog",
"href": "https://mintlify.com/blog",
"icon": "newspaper"
}
]
}
},
"logo": {
"light": "/logo/light.svg",
"dark": "/logo/dark.svg"
},
"navbar": {
"links": [
{
"label": "Support",
"href": "mailto:[email protected]"
}
],
"primary": {
"type": "button",
"label": "Dashboard",
"href": "https://dashboard.mintlify.com"
}
},
"contextual": {
"options": [
"copy",
"view",
"chatgpt",
"claude",
"perplexity",
"mcp",
"cursor",
"vscode"
]
},
"footer": {
"socials": {
"x": "https://x.com/mintlify",
"github": "https://github.com/mintlify",
"linkedin": "https://linkedin.com/company/mintlify"
}
}
}

File: index.mdx

title: "Introduction" icon: 'star'

Setting up

Get your documentation site up and running in minutes.

<Card
title="Start here"
icon="rocket"
href="/quickstart"
horizontal

Follow our three step quickstart guide.

Make it yours

Design a docs site that looks great and empowers your users.

Edit your docs locally and preview them in real time. Customize the design and colors of your site to match your brand. Organize your docs to help users find what they need and succeed with your product. Auto-generate API documentation from OpenAPI specifications.

Create beautiful pages

Everything you need to create world-class documentation.

Use MDX to style your docs pages. Add sample code to demonstrate how to use your product. Display images and other media. Write once and reuse across your docs.

Make your content agent ready

Make your docs work for humans and AI agents alike.

Embed shareable AI prompts readers can copy or open in Cursor. Show different content to humans and agents reading your docs. Give readers one-click access to Claude, ChatGPT, Cursor, and more. Set up Claude Code, Cursor, or Windsurf with Mintlify's skill.

Need inspiration?

<Card
title="See complete examples"
icon="stars"
href="https://mintlify.com/customers"

Browse our showcase of exceptional documentation sites.

File: quickstart.mdx

title: "Quickstart" icon: 'rocket'

Get started in three steps

Get your documentation site running locally and make your first customization.

Step 1: Set up your local environment

During the onboarding process, you created a GitHub repository with your docs content if you didn't already have one. You can find a link to this repository in your [dashboard](https://dashboard.mintlify.com).
text
To clone the repository locally so that you can make and preview changes to your docs, follow the [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) guide in the GitHub docs.
 1. Install the Mintlify CLI: `npm i mint` 2. Navigate to your docs directory and run: `mint dev` 3. Open `http://localhost:3000` to see your docs live!
text
<Tip>Your preview updates automatically as you edit files.</Tip>

Step 2: Deploy your changes

Install the Mintlify GitHub app from your [dashboard](https://dashboard.mintlify.com/settings/organization/github-app).
text
Our GitHub app automatically deploys your changes to your docs site, so you don't need to manage deployments yourself.
 For a first change, let's update the name and colors of your docs site.
text
1. Open `docs.json` in your editor.
2. Change the `"name"` field to your project name.
3. Update the `"colors"` to match your brand.
4. Save and see your changes instantly at `http://localhost:3000`.

<Tip>Try changing the primary color to see an immediate difference!</Tip>

Step 3: Go live

1. Commit and push your changes. 2. Your docs will update and be live in moments!

Next steps

Now that you have your docs running, explore these key features:

Learn MDX syntax and start writing your documentation. Make your docs match your brand perfectly. Include syntax-highlighted code blocks. Auto-generate API docs from OpenAPI specs. **Need help?** See our [full documentation](https://mintlify.com/docs) or join our [community](https://mintlify.com/community).

File: agent-ready/contextual.mdx

title: 'Contextual menu' icon: 'bolt'

The contextual toolbar is a floating action bar that appears on every page of your docs. It lets readers instantly copy page content, open it in an AI assistant, or add your docs as an MCP server — without leaving the page.

Configure it in docs.json under contextual.options:

json docs.json
{
  "contextual": {
    "options": ["copy", "view", "claude", "chatgpt", "mcp", "cursor", "vscode"]
  }
}

Available options

Content actions

Option Description
copy Copies the page as Markdown to the clipboard
view Opens the raw Markdown version of the page (.md URL)

AI assistants

Option Description
claude Opens the page in Claude
chatgpt Opens the page in ChatGPT
perplexity Opens the page in Perplexity
grok Opens the page in Grok
aistudio Opens the page in Google AI Studio

Editor integrations

Option Description
cursor Adds the page to Cursor's context
vscode Adds the page to VS Code Copilot
windsurf Adds the page to Windsurf's Cascade
devin Opens the page in Devin

MCP

Option Description
mcp Shows instructions for using your docs as an MCP server
add-mcp Provides a one-click prompt to add your docs MCP server to an AI tool
The `mcp` and `add-mcp` options are especially powerful — they let developers connect your entire docs site to any MCP-compatible AI assistant, so it can answer questions about your product directly.

Custom options

You can add custom entries to the toolbar with a title, description, icon, and link. The href supports dynamic placeholders:

Placeholder Resolves to
$page The current page's full URL
$path The current page's path
$mcp Your docs MCP server URL
json docs.json
{
  "contextual": {
    "options": [
      "copy",
      "claude",
      {
        "title": "Open issue",
        "description": "Report a problem with this page",
        "icon": "github",
        "href": "https://github.com/your-org/docs/issues/new?title=Issue+on+$path"
      }
    ]
  }
}
The contextual toolbar is only visible on preview and production deployments, not in `mint dev` local preview.

Pairing with Visibility

The toolbar's copy and view options expose your page's Markdown content directly. If you use the Visibility component, the for="agents" blocks will be included in that Markdown — giving AI assistants structured context that human readers don't see.

File: agent-ready/prompt.mdx

title: 'Prompt component' icon: 'robot'

The Prompt component displays a pre-built AI prompt with one-click actions to copy it to the clipboard or open it directly in Cursor. It's ideal for any docs page where you want to hand readers a ready-to-use prompt.

Basic usage

You are a technical writer. Given the following API endpoint documentation, write a one-paragraph summary that explains what the endpoint does, what inputs it requires, and what it returns. Be concise and use plain language.

mdx
<Prompt description="Summarize this API endpoint">
You are a technical writer. Given the following API endpoint documentation,
write a one-paragraph summary that explains what the endpoint does, what
inputs it requires, and what it returns. Be concise and use plain language.
</Prompt>

With Cursor integration

Add actions={["copy", "cursor"]} to also surface an "Open in Cursor" button. This is especially useful for prompts readers will use in their editor.

You are an expert TypeScript developer. Given the following OpenAPI specification, generate a fully-typed API client using native fetch. Include:

  • A base client class with configurable baseUrl and auth headers
  • One method per endpoint, with typed request parameters and response types
  • JSDoc comments on each method
    Do not use any third-party HTTP libraries.
mdx
<Prompt
  description="Generate a typed API client"
  icon="code"
  actions={["copy", "cursor"]}
>
You are an expert TypeScript developer. Given the following OpenAPI
specification, generate a fully-typed API client using native fetch...
</Prompt>

Props

Heading text shown above the prompt content. Supports Markdown. The prompt text that gets copied or sent to Cursor. Which action buttons to show. Options: `"copy"`, `"cursor"`. Defaults to `["copy"]`. An icon displayed alongside the description. Supports Font Awesome, Lucide, and Tabler icon names, image URLs, or inline SVG.

When to use it

The Prompt component works well anywhere you're teaching readers to work with AI:

  • Quickstart guides — give readers a prompt to generate their first integration
  • API reference pages — include a prompt for generating client code from the spec
  • Troubleshooting guides — embed a debugging prompt readers can run against their own error logs
  • Conceptual pages — add a prompt for exploring the topic further with an AI assistant

File: agent-ready/visibility.mdx

title: 'Visibility' icon: 'eye'

The Visibility component lets a single page serve two audiences: humans reading on the web and AI agents processing the Markdown output. Content marked for="humans" appears on the rendered page but is excluded from Markdown exports. Content marked for="agents" is hidden on the web but included in Markdown.

This means you can write conversational, UI-centric instructions for humans and structured, machine-readable instructions for AI — without maintaining two separate pages.

How it works

Mintlify serves every page at two URLs:

  • https://docs.example.com/page — the rendered site, for humans
  • https://docs.example.com/page.md — the raw Markdown, for AI agents

Visibility controls what appears at each URL.

Example

mdx
<Visibility for="humans">
  <Steps>
    <Step title="Open the dashboard">
      Navigate to [dashboard.example.com](https://dashboard.example.com) and sign in.
    </Step>
    <Step title="Create an API key">
      Go to **Settings → API Keys** and click **New key**.
    </Step>
  </Steps>
</Visibility>

<Visibility for="agents">
  To authenticate, send a POST request to `/v1/auth/token` with the user's
  email and password in the request body. The response includes a bearer token
  valid for 24 hours. Pass this token as `Authorization: Bearer <token>` on
  all subsequent requests.
</Visibility>

Human readers see the step-by-step UI walkthrough. AI agents processing the Markdown get the direct API instructions instead.

Props

- `"humans"` — visible on the rendered web page, excluded from `.md` export - `"agents"` — hidden on the rendered web page, included in `.md` export

When to use it

Show UI screenshots and button clicks to humans. Give agents the equivalent API calls. Show a visual settings panel to humans. Give agents the equivalent JSON or CLI flags. Show a friendly explanation to humans. Give agents structured error codes and remediation steps. Include rich diagrams and narrative for humans. Provide a concise structured summary for agents.

Combining with Prompt

Visibility and Prompt complement each other well. Use Visibility to give agents structured context, then use Prompt to give human readers a prompt they can use to ask an AI about that same content.

mdx
<Visibility for="agents">
  ## Authentication schema
  - Method: Bearer token
  - Header: `Authorization: Bearer <token>`
  - Token TTL: 86400 seconds
  - Refresh endpoint: POST /v1/auth/refresh
</Visibility>

<Prompt description="Ask about authentication" icon="lock">
  Explain how authentication works in this API and show me example code for
  getting a token and making an authenticated request.
</Prompt>

File: ai-tools/claude-code.mdx

title: "Claude Code setup" icon: "asterisk"

Set up Claude Code to help you write and maintain your Mintlify documentation.

Prerequisites

  • Active Claude subscription (Pro, Max, or API access)

Setup

```bash npm install -g @anthropic-ai/claude-code ``` In your docs directory, run:
bash
npx skills add https://mintlify.com/docs

This gives Claude Code Mintlify's component reference, writing standards,
and workflow guidance.

Edit `AGENTS.md` in your project root to add project-specific terminology, style preferences, and content boundaries. ```bash claude ```

File: ai-tools/cursor.mdx

title: "Cursor setup" icon: "arrow-pointer"

Set up Cursor to help you write and maintain your Mintlify documentation.

Prerequisites

  • Cursor editor installed

Setup

Open the root of your documentation repository where `docs.json` is located. In the integrated terminal, run:
bash
npx skills add https://mintlify.com/docs

This gives Cursor Mintlify's component reference, writing standards,
and workflow guidance.

Edit `AGENTS.md` in your project root to add project-specific terminology, style preferences, and content boundaries. Open a file and use Cursor's AI features to draft and edit documentation.

File: ai-tools/windsurf.mdx

title: "Windsurf setup" icon: "water"

Set up Windsurf's Cascade AI assistant to help you write and maintain your Mintlify documentation.

Prerequisites

  • Windsurf editor installed

Setup

Open the root of your documentation repository where `docs.json` is located. In the integrated terminal, run:
bash
npx skills add https://mintlify.com/docs

This gives Windsurf Mintlify's component reference, writing standards,
and workflow guidance.

Edit `AGENTS.md` in your project root to add project-specific terminology, style preferences, and content boundaries. Open a file and use Cascade to draft and edit documentation.

File: api-reference/introduction.mdx

title: 'Introduction'

If you're not looking to build API reference documentation, you can delete this section by removing the api-reference folder.

Welcome

There are two ways to build API documentation: OpenAPI and MDX components. For the starter kit, we are using the following OpenAPI specification.

<Card
title="Plant Store Endpoints"
icon="leaf"
href="https://github.com/mintlify/starter/blob/main/api-reference/openapi.json"

View the OpenAPI specification file

Authentication

All API endpoints are authenticated using Bearer tokens and picked up from the specification file.

json
"security": [
  {
    "bearerAuth": []
  }
]

File: api-reference/openapi.json

{
"openapi": "3.1.0",
"info": {
"title": "OpenAPI Plant Store",
"description": "A sample API that uses a plant store as an example to demonstrate features in the OpenAPI specification",
"license": {
"name": "MIT"
},
"version": "1.0.0"
},
"servers": [
{
"url": "http://sandbox.mintlify.com"
}
],
"security": [
{
"bearerAuth": []
}
],
"paths": {
"/plants": {
"get": {
"description": "Returns all plants from the system that the user has access to",
"parameters": [
{
"name": "limit",
"in": "query",
"description": "The maximum number of results to return",
"schema": {
"type": "integer",
"format": "int32"
}
}
],
"responses": {
"200": {
"description": "Plant response",
"content": {
"application/json": {
"schema": {
"type": "array",
"items": {
"$ref": "#/components/schemas/Plant"
}
}
}
}
},
"400": {
"description": "Unexpected error",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Error"
}
}
}
}
}
},
"post": {
"description": "Creates a new plant in the store",
"requestBody": {
"description": "Plant to add to the store",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/NewPlant"
}
}
},
"required": true
},
"responses": {
"200": {
"description": "plant response",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Plant"
}
}
}
},
"400": {
"description": "unexpected error",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Error"
}
}
}
}
}
}
},
"/plants/{id}": {
"delete": {
"description": "Deletes a single plant based on the ID supplied",
"parameters": [
{
"name": "id",
"in": "path",
"description": "ID of plant to delete",
"required": true,
"schema": {
"type": "integer",
"format": "int64"
}
}
],
"responses": {
"204": {
"description": "Plant deleted",
"content": {}
},
"400": {
"description": "unexpected error",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/Error"
}
}
}
}
}
}
}
},
"webhooks": {
"/plant/webhook": {
"post": {
"description": "Information about a new plant added to the store",
"requestBody": {
"description": "Plant added to the store",
"content": {
"application/json": {
"schema": {
"$ref": "#/components/schemas/NewPlant"
}
}
}
},
"responses": {
"200": {
"description": "Return a 200 status to indicate that the data was received successfully"
}
}
}
}
},
"components": {
"schemas": {
"Plant": {
"required": [
"name"
],
"type": "object",
"properties": {
"name": {
"description": "The name of the plant",
"type": "string"
},
"tag": {
"description": "Tag to specify the type",
"type": "string"
}
}
},
"NewPlant": {
"allOf": [
{
"$ref": "#/components/schemas/Plant"
},
{
"required": [
"id"
],
"type": "object",
"properties": {
"id": {
"description": "Identification number of the plant",
"type": "integer",
"format": "int64"
}
}
}
]
},
"Error": {
"required": [
"error",
"message"
],
"type": "object",
"properties": {
"error": {
"type": "integer",
"format": "int32"
},
"message": {
"type": "string"
}
}
}
},
"securitySchemes": {
"bearerAuth": {
"type": "http",
"scheme": "bearer"
}
}
}
}

File: api-reference/endpoint/create.mdx

title: 'Create Plant' openapi: 'POST /plants'

File: api-reference/endpoint/delete.mdx

title: 'Delete Plant' openapi: 'DELETE /plants/{id}'

File: api-reference/endpoint/get.mdx

title: 'Get Plants' openapi: 'GET /plants'

File: api-reference/endpoint/webhook.mdx

title: 'New Plant' openapi: 'WEBHOOK /plant/webhook'

File: essentials/code.mdx

title: 'Code blocks' icon: 'code'

Inline code

To denote a word or phrase as code, enclose it in backticks (`).

text
To denote a `word` or `phrase` as code, enclose it in backticks (`).

Code blocks

Use fenced code blocks by enclosing code in three backticks and follow the leading ticks with the programming language of your snippet to get syntax highlighting. Optionally, you can also write the name of your code after the programming language.

java helloworld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
md
```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

Code groups

To display the same snippet in multiple languages as tabs, use the CodeGroup component. See Components for usage.

File: essentials/components.mdx

title: 'Components' icon: 'puzzle-piece'

Mintlify components let you build rich, interactive documentation pages using MDX. Here are some commonly used ones.

See the components overview in the Mintlify documentation for a complete list.

Callouts

Use callouts to draw attention to important information.

A Note is for general information that helps the reader.

A Tip highlights a helpful shortcut or best practice.

A Warning flags something that could cause problems.

An Info callout provides supplementary context.

mdx
<Note>A **Note** is for general information that helps the reader.</Note>

<Tip>A **Tip** highlights a helpful shortcut or best practice.</Tip>

<Warning>A **Warning** flags something that could cause problems.</Warning>

<Info>An **Info** callout provides supplementary context.</Info>

Cards

Cards link readers to other pages or resources.

Auto-generated docs from your OpenAPI spec. Get your docs running in three steps.
mdx
<Columns cols={2}>
  <Card title="API Reference" icon="terminal" href="/api-reference/introduction">
    Auto-generated docs from your OpenAPI spec.
  </Card>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Get your docs running in three steps.
  </Card>
</Columns>

Use <Columns cols={N}> to control the grid width. Cards without href render as informational panels.

Steps

Steps present numbered procedures clearly.

```bash npm install my-package ``` Run the init command in your project root. ```bash npx my-package init ``` Start using the package in your code.
mdx
<Steps>
  <Step title="Install the package">
    ```bash
    npm install my-package
    ```
  </Step>
  <Step title="Initialize">
    Run the init command in your project root.
  </Step>
  <Step title="You're ready">
    Start using the package in your code.
  </Step>
</Steps>

Tabs

Tabs let readers switch between alternative content — different languages, environments, or platforms.

```bash npm install my-package ``` ```bash yarn add my-package ``` ```bash pnpm add my-package ```
mdx
<Tabs>
  <Tab title="npm">
    ```bash
    npm install my-package
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add my-package
    ```
  </Tab>
  <Tab title="pnpm">
    ```bash
    pnpm add my-package
    ```
  </Tab>
</Tabs>

Accordions

Accordions collapse content behind a toggle — useful for FAQs or optional detail.

A brief answer to the first question. Keep it concise. Another answer here. Use as much space as you need.
mdx
<AccordionGroup>
  <Accordion title="What does this product do?">
    A brief answer to the first question.
  </Accordion>
  <Accordion title="How is pricing calculated?">
    Another answer here.
  </Accordion>
</AccordionGroup>

Frames

Wrap images or other content in a Frame to add a styled border and rounded corners.

mdx
<Frame>
  <img src="/images/screenshot.png" alt="App screenshot" />
</Frame>

Code groups

CodeGroup displays multiple code snippets as tabs — ideal for showing the same example in multiple languages.

```typescript TypeScript const response = await fetch('https://api.example.com/users'); const users = await response.json(); ```
python python
import requests
response = requests.get('https://api.example.com/users')
users = response.json()
bash curl
curl https://api.example.com/users
mdx
<CodeGroup>
  ```typescript TypeScript
  const response = await fetch('https://api.example.com/users');
  ```

  ```python Python
  response = requests.get('https://api.example.com/users')
  ```
</CodeGroup>

File: essentials/images.mdx

title: 'Images and embeds' icon: 'image'

Image

Using Markdown

The markdown syntax lets you add images using the following code

md
![title](/path/image.jpg)

Note that the image file size must be less than 5MB. Otherwise, we recommend hosting on a service like Cloudinary or S3. You can then use that URL and embed.

Using embeds

To get more customizability with images, you can also use embeds to add images

html
<img height="200" src="/path/image.jpg" />

Embeds and HTML elements

Mintlify supports HTML tags in Markdown. This is helpful if you prefer HTML tags to Markdown syntax, and lets you create documentation with infinite flexibility.

iFrames

Loads another HTML page within the document. Most commonly used for embedding videos.

html
<iframe src="https://www.youtube.com/embed/4KzFe50RQkQ"> </iframe>

File: essentials/markdown.mdx

title: 'Markdown syntax' icon: 'text-size'

Titles

Best used for section headers.

md
## Titles

Subtitles

Best used for subsection headers.

md
### Subtitles

Each title and subtitle creates an anchor and also shows up on the table of contents on the right.

Text formatting

We support most markdown formatting. Simply add **, _, or ~ around text to format it.

Style How to write it Result
Bold **bold** bold
Italic _italic_ italic
Strikethrough ~strikethrough~ strikethrough

You can combine these. For example, write **_bold and italic_** to get bold and italic text.

You need to use HTML to write superscript and subscript text. That is, add <sup> or <sub> around your text.

Text Size How to write it Result
Superscript <sup>superscript</sup> superscript
Subscript <sub>subscript</sub> subscript

Linking to pages

You can add a link by wrapping text in [](). You would write [link to google](https://google.com) to link to google.

Links to pages in your docs need to be root-relative. Basically, you should include the entire folder path. For example, [link to text](/writing-content/text) links to the page "Text" in our components section.

Relative links like [link to text](../text) will open slower because we cannot optimize them as easily.

Blockquotes

Singleline

To create a blockquote, add a > in front of a paragraph.

Dorothy followed her through many of the beautiful rooms in her castle.

md
> Dorothy followed her through many of the beautiful rooms in her castle.

Multiline

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

md
> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

LaTeX

Mintlify supports LaTeX through the Latex component.

8 x (vk x H1 - H2) = (0,1)

md
<Latex>8 x (vk x H1 - H2) = (0,1)</Latex>

File: essentials/navigation.mdx

title: 'Navigation' icon: 'map'

The navigation menu is the list of links on every website.

You will likely update docs.json every time you add a new page. Pages do not show up automatically.

Our navigation syntax is recursive which means you can make nested navigation groups. You don't need to include .mdx in page names.

json regular navigation
"navigation": {
  "tabs": [
    {
      "tab": "Docs",
      "groups": [
        {
          "group": "Getting Started",
          "pages": ["quickstart"]
        }
      ]
    }
  ]
}
json nested navigation
"navigation": {
  "tabs": [
    {
      "tab": "Docs",
      "groups": [
        {
          "group": "Getting Started",
          "pages": [
            "quickstart",
            {
              "group": "Nested Reference Pages",
              "pages": ["nested-reference-page"]
            }
          ]
        }
      ]
    }
  ]
}

Folders

Simply put your MDX files in folders and update the paths in docs.json.

For example, to have a page at https://yoursite.com/your-folder/your-page you would make a folder called your-folder containing an MDX file called your-page.mdx.

You cannot use api for the name of a folder unless you nest it inside another folder. Mintlify uses Next.js which reserves the top-level api folder for internal server calls. A folder name such as api-reference would be accepted.

json navigation with folder
"navigation": {
  "tabs": [
    {
      "tab": "Docs",
      "groups": [
        {
          "group": "Group Name",
          "pages": ["your-folder/your-page"]
        }
      ]
    }
  ]
}

Hidden pages

MDX files not included in docs.json will not show up in the sidebar but are accessible through the search bar and by linking directly to them.

File: essentials/reusable-snippets.mdx

title: "Reusable snippets" icon: "recycle"

Any content you find yourself repeating across pages is a good candidate for a snippet. Create the file once in the snippets/ directory, import it wherever you need it, and updates propagate everywhere automatically.

Files inside `snippets/` are not rendered as standalone pages. They only appear where you import them.

Content snippets

The simplest pattern: write MDX content in a snippet file and import it as a component.

mdx snippets/prerequisites.mdx
Before you begin, make sure you have:
- Node.js 18 or higher
- An API key from your [dashboard](https://dashboard.example.com)

Import it into any page using a root-relative path:

mdx your-page.mdx
---
title: Install the SDK
---

import Prerequisites from '/snippets/prerequisites.mdx';

<Prerequisites />

## Installation
...

You can also use relative imports, which enables CMD+click navigation to the snippet in your editor:

mdx
import Prerequisites from '../snippets/prerequisites.mdx';

Variable snippets

Export named constants from a snippet file to reuse values like product names, version numbers, or URLs.

mdx snippets/vars.mdx
export const sdkVersion = '3.2.0';
export const baseUrl = 'https://api.example.com/v1';

Import and use them inline:

mdx your-page.mdx
import { sdkVersion, baseUrl } from '/snippets/vars.mdx';

The current SDK version is **{sdkVersion}**.

All requests go to `{baseUrl}`.

Component snippets

For snippets that need to vary based on where they're used, export an arrow function component that accepts props.

mdx snippets/endpoint-note.mdx
export const EndpointNote = ({ method, path }) => (
  <Note>
    This guide covers the <code>{method} {path}</code> endpoint.
    See the <a href="/api-reference/introduction">API reference</a> for full details.
  </Note>
);
  • Use arrow function syntax (const Foo = () => ...).
  • The function keyword is not supported in snippet files.
  • MDX syntax doesn't compile inside arrow function bodies. Use plain HTML tags there, or use a default export instead.

Pass props when you render it:

mdx your-page.mdx
import { EndpointNote } from '/snippets/endpoint-note.mdx';

<EndpointNote method="POST" path="/v1/users" />

Snippets importing snippets

Snippets can import other snippets, which is useful for composing larger shared sections from smaller pieces.

mdx snippets/auth-intro.mdx
import AuthNote from '/snippets/auth-note.mdx';

## Authentication

All endpoints require a bearer token.

<AuthNote />

File: essentials/settings.mdx

title: 'Configuration' icon: 'gear'

Every Mintlify site is configured through a docs.json file in your project root. Changes take effect immediately in local preview.

Identity

Set the name, theme, and visual identity of your site.

json docs.json
{
  "name": "Acme Docs",
  "theme": "mint",
  "favicon": "/favicon.svg",
  "logo": {
    "light": "/logo/light.svg",
    "dark": "/logo/dark.svg"
  }
}
Your project name. Appears in the browser tab title and site metadata. The visual theme. Options: `mint`, `maple`, `willow`, `sequoia`, `prism`. Path to your favicon. SVG recommended for crisp rendering at all sizes. Logo shown in light mode. Logo shown in dark mode. URL the logo links to.

Colors

json docs.json
{
  "colors": {
    "primary": "#16A34A",
    "light": "#07C983",
    "dark": "#15803D"
  }
}
Primary brand color. Used for highlights, active states, and accents in light mode. Primary color for dark mode. Used for buttons and important interactive elements. Override the default page background color. Background hex color in light mode. Background hex color in dark mode.

Configure the top navigation bar links and primary call-to-action.

json docs.json
{
  "navbar": {
    "links": [
      { "label": "Support", "href": "mailto:[email protected]" }
    ],
    "primary": {
      "type": "button",
      "label": "Dashboard",
      "href": "https://dashboard.example.com"
    }
  }
}
Text links displayed in the top navigation bar. Display text for the link. URL the link points to. The prominent call-to-action in the top-right corner. `button` renders a CTA button. `github` renders a star count badge. Button label. Required when type is `button`. URL the button or badge links to.

Organize your pages into tabs and groups. See the Navigation guide for full details.

json docs.json
{
  "navigation": {
    "tabs": [
      {
        "tab": "Guides",
        "groups": [
          {
            "group": "Getting started",
            "pages": ["index", "quickstart"]
          }
        ]
      }
    ],
    "global": {
      "anchors": [
        {
          "anchor": "Blog",
          "href": "https://example.com/blog",
          "icon": "newspaper"
        }
      ]
    }
  }
}

Contextual toolbar

The contextual toolbar floats on every page and gives readers one-click access to AI tools and integrations. See Contextual toolbar for the full list of options.

json docs.json
{
  "contextual": {
    "options": ["copy", "view", "claude", "mcp", "cursor", "vscode"]
  }
}
json docs.json
{
  "footer": {
    "socials": {
      "x": "https://x.com/yourhandle",
      "github": "https://github.com/yourorg",
      "linkedin": "https://linkedin.com/company/yourco"
    }
  }
}
Social links shown in the footer. Supported keys: `x`, `github`, `linkedin`, `discord`, `slack`, `facebook`, `instagram`, `website`.

File: snippets/snippet-intro.mdx

One of the core principles of software development is DRY (Don't Repeat
Yourself). This is a principle that applies to documentation as
well. If you find yourself repeating the same content in multiple places, you
should consider creating a custom snippet to keep your content in sync.

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →