Files
mintlify__docs/quickstart.mdx
Ethan Palm 7662f8fb2a Feedback resolution 2026 06 08 (#6123)
* clarify MCP returns MD

* Fix doc issues surfaced by user feedback

- Fix claude mcp add --header argument order: the flag must come after
  the positional <name> and <url> args because --header is variadic and
  otherwise consumes everything that follows it, causing the "missing
  required argument 'name'" error users reported.
- Add tip to wrap iframes in Frame component to prevent overflow (user
  suggestion on image-embeds page).
- Fix broken anchor link in quickstart CLI tab: /cli/install has no
  #clone-your-repository section; replaced with inline git clone
  instructions and a correct link to /deploy/github.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Document wide-mode behavior for side panel

Wide mode hides the entire side panel (not just the TOC), including
Panel components and OpenAPI request/response examples. This was
undocumented and actively confused a user who couldn't understand why
their OpenAPI example panels disappeared on wide-mode pages.

- Fix the wide mode description in organize/pages.mdx (it previously
  said only the TOC was hidden, but ContentSideLayout.tsx returns null
  for wide/center/custom modes entirely)
- Add a Note to components/panel.mdx calling out that the side panel
  is absent on wide, center, and custom pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Resolve user feedback: clarify path formats, load timing, and analytics config

- react-components: add Constraints section (hooks pre-injected, no npm, no default exports)
- posthog: fix default host from app.posthog.com to ph.mintlify.com (confirmed via source)
- plausible: add ParamField descriptions including server field explanation
- create/text: note that internal links require root-relative paths without file extensions
- create/image-embeds: clarify image paths are root-relative, relative paths unsupported
- create/redirects: show redirects as top-level field in full docs.json example
- customize/custom-scripts: note that custom JS runs after page is interactive, applies globally

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* 💅

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-08 17:21:31 -07:00

169 lines
6.5 KiB
Plaintext

---
title: "Quickstart"
description: "Get started with Mintlify by deploying your documentation site in minutes and making your first content change with the web editor or Git."
keywords: ["quickstart", "deploy", "get started", "first steps", "tutorial", "setup", "onboarding"]
boost: 3
---
import SkillMcpPrompt from "/snippets/skill-mcp-prompt.mdx";
After you complete this guide, you'll have a live documentation site ready to customize and update.
## Before you begin
Mintlify uses a docs-as-code approach to manage your documentation. Every page on your site has a corresponding file stored in your documentation <Tooltip tip="Your documentation's source code where all files and their history are stored. The web editor connects to your documentation repository to access and modify content, or you can edit files locally in your preferred IDE.">repository</Tooltip>.
When you connect your documentation repository to your project, you can work on your documentation locally or in the web editor and sync any changes to your remote repository.
<Tip>
Using an AI coding tool?
Copy the following prompt to add the Mintlify [skill](/ai/skillmd) and [MCP server](/ai/model-context-protocol) for better results when updating your documentation.
</Tip>
<SkillMcpPrompt />
## Deploy your documentation site
Go to [mintlify.com/start](https://mintlify.com/start) and complete the onboarding process. During onboarding, you'll connect your GitHub account, create or select a repository for your documentation, and install the GitHub App to enable automatic deployments.
After onboarding, your documentation site deploys and is accessible at your `.mintlify.app` URL.
<AccordionGroup>
<Accordion title="Optional: Skip connecting a Git provider during onboarding">
If you want to get started quickly without connecting your own repository, you can skip the Git provider connection during onboarding. Mintlify creates a private repository in a private organization and automatically configures the GitHub App for you.
This lets you use the web editor immediately. If you want to use your own repository later, go to [Git Settings](https://app.mintlify.com/settings/deployment/git-settings) in your dashboard to migrate your content using the Git setup wizard. See [Clone to your own repository](/deploy/github#clone-to-your-own-repository) for details.
</Accordion>
</AccordionGroup>
## View your deployed site
Your documentation site is now deployed at `https://<your-project-name>.mintlify.app`.
Find your exact URL on the **Overview** page of your [dashboard](https://app.mintlify.com/).
<Frame>
<img
alt="Overview page of the Mintlify dashboard."
className="block dark:hidden"
src="/images/quickstart/mintlify-domain-light.png"
/>
<img
alt="Overview page of the Mintlify dashboard."
className="hidden dark:block"
src="/images/quickstart/mintlify-domain-dark.png"
/>
</Frame>
<Tip>
Your site is ready to view immediately. Use this URL for testing and sharing with your team. Before sharing with your users, you may want to add a [custom domain](/customize/custom-domain).
</Tip>
## Make your first change
<Tabs>
<Tab title="CLI">
<Steps>
<Step title="Install the CLI">
The CLI requires [Node.js](https://nodejs.org/en) v20.17.0 or higher. Use an LTS version for stability.
<CodeGroup>
```bash npm
npm i -g mint
```
```bash pnpm
pnpm add -g mint
```
</CodeGroup>
See [Install the CLI](/cli/install) for full details and troubleshooting.
</Step>
<Step title="Clone your repository">
If you haven't already cloned your repository locally, clone it using Git:
```bash
git clone <your-repository-url>
```
If your repository is in Mintlify's private organization, see [Clone to your own repository](/deploy/github#clone-to-your-own-repository) to move it to your account first.
</Step>
<Step title="Edit a page">
Open `index.mdx` in your preferred editor and update the description in the frontmatter:
```mdx
---
title: "Introduction"
description: "Your custom description here"
---
```
</Step>
<Step title="Preview locally">
Run the following command from your documentation directory:
```bash
mint dev
```
View your preview at `http://localhost:3000`.
</Step>
<Step title="Push your changes">
Commit and push your changes to trigger a deployment:
```bash
git add .
git commit -m "Update description"
git push
```
Mintlify automatically deploys your changes. View your deployment status on the [Overview](https://app.mintlify.com/) page of your dashboard.
</Step>
</Steps>
</Tab>
<Tab title="Web editor">
<Steps>
<Step title="Open the web editor">
Navigate to the [web editor](https://app.mintlify.com/editor) in your dashboard.
</Step>
<Step title="Edit a page">
Open the **Introduction** page and update the description.
<Frame>
<img
alt="Introduction page open in the web editor with the description edited to say Hello world!."
className="block dark:hidden"
src="/images/quickstart/hello-world-light.png"
/>
<img
alt="Introduction page open in the web editor with the description edited to say Hello world!."
className="hidden dark:block"
src="/images/quickstart/hello-world-dark.png"
/>
</Frame>
</Step>
<Step title="Publish">
Click **Publish** in the top-right of the web editor toolbar.
</Step>
<Step title="View live">
On the [Overview](https://app.mintlify.com/) page of your dashboard, you can see your site's deployment status. When it finishes deploying, refresh your documentation site to see your changes live.
</Step>
</Steps>
</Tab>
</Tabs>
## Next steps
<Card title="Use the web editor" icon="mouse-pointer-2" horizontal href="/editor/index">
Edit documentation in your browser and preview how your pages look when published.
</Card>
<Card title="Explore CLI commands" icon="terminal" horizontal href="/cli/index">
Find broken links, check accessibility, validate OpenAPI specs, and more.
</Card>
<Card title="Add a custom domain" icon="globe" horizontal href="/customize/custom-domain">
Use your own domain for your documentation site.
</Card>