Snippets

Snippets are reusable content blocks stored in a /snippets directory. Import them into any MDX page to avoid duplicating content.

Creating Snippets

Create a /snippets directory at your docs root:

my-docs/
├── docs.json
├── introduction.mdx
└── snippets/
    ├── prerequisites.mdx
    ├── installation.mdx
    └── support-cta.mdx

Write snippet content like any MDX file, but without frontmatter:

Before you begin, make sure you have:

- Node.js 20 or higher
- A GitHub account
- A text editor (VS Code recommended)

Using Snippets

Import and use snippets in your pages:

---
title: Getting Started
---

## Prerequisites


<Prerequisites />

## Installation

Continue with your page content...

Snippet Components

Snippets can contain Jamdesk components:

<Columns cols={2}>
  <Card title="Documentation" icon="book" href="/docs">

    Browse our guides

</Card>
  <Card title="Contact Support" icon="headset" href="/support">

    Get help from our team

</Card>
</Columns>

Use it across multiple pages:

## Need Help?

<SupportCTA />

Interactive Snippets

For snippets that need React hooks (useState, useEffect, etc.), use .tsx files with the 'use client' directive:

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Import in MDX:

<Counter />

Parameterized Snippets

Pass props to make snippets dynamic:

export const ApiKeyWarning = ({ service }) => (
  <Warning>

    Never commit your {service} API key to version control. Use environment variables instead.

</Warning>
);

Use with props:

<ApiKeyWarning service="Stripe" />

Organizing Snippets

For larger projects, organize snippets into subdirectories:

snippets/
├── components/
│   ├── cta-cards.mdx
│   └── feature-table.mdx
├── warnings/
│   ├── api-key.mdx
│   └── deprecation.mdx
└── shared/
    ├── prerequisites.mdx
    └── support-links.mdx

Import with the full path:

Common Use Cases

Snippet vs Inline Component

Use snippets for content that appears on multiple pages. Use inline components for one-off presentational components within a single page.

What's Next?