> ## Documentation Index
> [HTML page](https://blode.md/docs/content/mdx-basics)
> [Documentation index](https://blode.md/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# MDX basics

Learn how to write Edda documentation with standard Markdown, GFM syntax, and built-in JSX components that need no import statements.

MDX combines Markdown with JSX components. You write standard Markdown, and when you need richer elements, you use built-in components directly in your content. No imports are needed.

## Markdown

All standard Markdown syntax works, including GitHub Flavored Markdown (GFM):

- **Headings**: `#`, `##`, `###`, etc.
- **Bold** and _italic_ text
- Lists (ordered and unordered)
- [Links](https://blode.co/edda) and images
- Blockquotes
- Tables
- Fenced code blocks with syntax highlighting

## Using components

Edda provides over 30 built-in components. Use them directly in your MDX without any import statements:

```mdx
This is a paragraph with standard Markdown.

<Callout type="info">This is a callout component rendered inline.</Callout>
```

Components accept props just like JSX:

```mdx
<Card title="My card" icon="star" href="/some-page">
  Card content goes here.
</Card>
```

## Frontmatter

Every page starts with YAML frontmatter between `---` delimiters:

```mdx
---
title: My page title
description: A brief summary of this page.
---

Page content starts here.
```

The `title` field is required. See the [frontmatter reference](/content/frontmatter) for all available fields.

## File naming

Pages are referenced by their file path without the `.mdx` extension. A file at `getting-started/installation.mdx` is referenced as `"getting-started/installation"` in your navigation config.

> [!NOTE]
> File names become URL slugs. Use lowercase with hyphens: `my-page.mdx`, not
>   `My Page.mdx`.

## Component reference

Browse all available components in the [Components](/components/callout) tab.