<!--
Sitemap:
- [What is Vocs](/introduction/what-is-vocs): Learn why Vocs exists and when to use it
- [Getting Started](/introduction/getting-started): Install Vocs and create your first documentation site
- [Project Structure](/introduction/project-structure): Overview of the structure of a Vocs project
- [Writing Docs with AI](/introduction/writing-docs-with-ai): Use an AI agent to create and maintain Vocs documentation
- [Markdown Extensions](/writing/markdown-extensions): Features and syntax of Markdown in Vocs
- [Code & Syntax Highlighting](/writing/syntax-highlighting): Rich markup and annotations for code
- [Twoslash](/writing/twoslash): Add type-aware annotations to code examples
- [Code Snippets](/writing/code-snippets): Include and reuse code in Markdown
- [Markdown Snippets](/writing/markdown-snippets): Include other Markdown files in MDX
- [React in Markdown](/writing/react): Compose MDX pages with React components
- [Mermaid Diagrams](/writing/mermaid): Render diagrams from text using Mermaid
- [Assets](/writing/assets): Manage images, fonts, icons, and other docs assets
- [Frontmatter](/writing/frontmatter): Configure page metadata, layouts, search, and UI visibility
- [Navigation](/features/navigation): Keep docs navigation synced with routes
- [Search](/features/search): Built-in client-side search powered by MiniSearch
- [Layouts](/features/layouts): Choose and customize page shells for your docs
- [Slots](/features/slots): Inject custom components into the docs shell
- [Theming](/features/theming): Customize colors, typography, spacing, logos, and code themes
- [Tailwind CSS](/features/tailwind): Use Tailwind utilities in Vocs pages and components
- [Dynamic OG Images](/features/dynamic-og-images): Generate social preview images from page metadata
- [Page Feedback](/features/feedback): Collect page-level feedback from readers
- [Redirects](/features/redirects): Preserve old URLs and route legacy paths to new locations
- [API Routes](/features/api-routes): Add server-rendered endpoints to your docs site
- [Agent Support](/features/agent-support): Serve documentation in machine-readable form for AI agents
- [Ask AI](/features/ask-ai): Built-in AI assistant menu on every page
- [MCP Server](/features/mcp-server): Expose your docs and source code to AI assistants
- [Changelog Generation](/features/changelog-generation): Fetch release notes and render a changelog page
- [Site Configuration](/reference/site-config): Reference for options accepted by defineConfig
- [Frontmatter Reference](/reference/frontmatter): All frontmatter fields accepted by a Vocs MDX page
- [Components](/reference/components): Reference for the public React components exported from Vocs
- [Hooks](/reference/hooks): Reference for the React hooks exported from Vocs
- [Changelog](/changelog): Release history for Vocs
-->

# Markdown Snippets \[Include other Markdown files in MDX]

Markdown snippets let you reuse Markdown or MDX content across pages by importing one `.mdx` file into another.

:::warning
Markdown snippets require MDX. If the page importing a snippet is a `.md` file, rename it to `.mdx`.
:::

## Quick Start

::::steps

### Create a snippet

Create a snippet file next to the page that will import it, or in a shared snippets directory.

```mdx [snippet.mdx]
### Hello world

This is my snippet.
```

### Import the snippet

Import the snippet into another MDX file, then render it like a React component.

```mdx [example.mdx]
import Snippet from './snippet.mdx'

# Example

This is an example of including a snippet in a Markdown file.

<Snippet />
```

### Output

The rendered page includes both the page content and the imported snippet content.

:::code-group

<div data-title="Preview">
  # Example

  This is an example of including a snippet in a Markdown file.

  ## Hello world

  This is my snippet.
</div>

```mdx [Output]
# Example

This is an example of including a snippet in a Markdown file.

## Hello world

This is my snippet.
```

:::

::::

## Passing Props

Imported MDX snippets compile to React components, so you can pass props when rendering them.

:::code-group

```mdx [example.mdx]
import Snippet from './snippet.mdx'

# Example

This is an example of including a snippet in a Markdown file.

<Snippet title="Hello world" content="This is my snippet." />
```

```mdx [snippet.mdx]
## {props.title}

{props.content}
```

:::

Use props for small variations such as names, labels, or short descriptions. If most of the content changes between pages, prefer separate snippets.

See also: [React in Markdown](/writing/react)
