Formatting guidelines (Mintlify)
docs.zapier.com runs on Mintlify. All content files are .mdx (Markdown plus JSX components). Plain .md does not render Mintlify components.
This skill is for components and page mechanics. For writing rules see writing-standards-dev-docs; for code blocks see code-examples.
Critical rules
- Use JSX comments, never HTML comments.
{/* like this */}. HTML comments (<!-- -->) break the page render. - Leave a blank line after an opening tag and before a closing tag, or the content may not render.
- New pages must be registered in
docs.jsonto appear in the sidebar — see contribute-docs. - Do not hand-edit generated files — see generated-content-safety.
- Do not hardcode the app count. Import it:
import { appCount } from "/snippets/sdk/vars.mdx";then use{appCount}.
Frontmatter
Every page opens with frontmatter. At minimum settitle and description, both written as task-oriented answers to “what does this page help the reader do?” (this also drives search and AI-answer quality). Use sidebarTitle when the H1 is long.
icon, tag (e.g. "Experimental", "Deprecated", "New"), noindex, mode. Do not add non-standard fields (such as doc_type, goal, prerequisites, or audience) — Mintlify ignores unknown frontmatter.
Callouts
Mintlify has six variants. Pick by severity so<Warning> and <Danger> keep their impact.
title="...". Note: unlike helpdocs, Mintlify <Tip> is always visible and there is no <Example> component.
Layout components
| Component | Use for | Notes |
|---|---|---|
<AccordionGroup> + <Accordion title="..."> | Optional detail, alternatives, FAQs | Group wrapper is AccordionGroup (helpdocs uses Accordions) |
<Tabs> + <Tab title="..."> | Different approaches or workflows | Use <CodeGroup> instead when only the language differs |
<CodeGroup> | Same call in multiple languages | See code-examples |
<Card> + <CardGroup cols={N}> | Landing-page and navigation links | Accepts icon, href, horizontal |
<Columns cols={N}> | Responsive multi-column content | 1–4 columns |
<Steps> + <Step title="..."> | Setup and quickstart flows | Richer than a numbered list |
<Frame caption="..."> | Screenshots | Styled container; always include alt on the <img> |
Diagrams
Use a live-rendered Mermaid block instead of a screenshot for flows, lifecycles, and state machines (agents can parse it; screenshots are opaque):Snippets (reusable content)
Single-source content lives insnippets/ and is imported:
snippets/sdk/ are auto-generated — edit the source .ts/.sh and re-run pnpm run sync-sdk, never the snippet. See generated-content-safety.
API reference components
Reference pages are normally generated from OpenAPI (do not hand-edit). For hand-authored reference content, Mintlify provides<ParamField>, <ResponseField>, <RequestExample>, and <ResponseExample>.
helpdocs → Mintlify translation
If you know the helpdocs (Zendesk) component set, note the differences:| helpdocs | Mintlify |
|---|---|
<Note> (one variant) | Six callouts: <Note> <Info> <Tip> <Warning> <Check> <Danger> |
<Accordions> | <AccordionGroup> |
<Plan> / <Beta> / <Alpha> | No equivalent — use a callout, <Badge>, or a table |
<Content-block> | Snippet import |
<Example> | No equivalent — use <Tip> or <Accordion> |
| (none) | <CodeGroup>, <Card>, <Steps>, Mermaid, OpenAPI playground |