Skip to main content
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.
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:
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: 
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.
snippets/vars.mdx
export const sdkVersion = '3.2.0';
export const baseUrl = 'https://api.example.com/v1';
Import and use them inline:
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.
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:
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.
snippets/auth-intro.mdx
import AuthNote from '/snippets/auth-note.mdx';

## Authentication

All endpoints require a bearer token.

<AuthNote />