# Markdown Snippets \[Include other Markdown files in 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)