MDX Basics
Write documentation using MDX - Markdown with superpowers
MDX lets you write documentation using familiar Markdown syntax while embedding interactive React components. It's the foundation of every Jamdesk page.
What is MDX?
MDX combines the simplicity of Markdown with the power of JSX. Write headings, lists, and code blocks in Markdown, then drop in components like <Card> or <Tabs> wherever you need interactivity.
# Welcome to My Docs
This is regular **Markdown** with a component below:
<Card title="Get Started" icon="rocket" href="/quickstart">
Jump right in with our quickstart guide.
</Card>Page Structure
Every MDX page starts with frontmatter - metadata between triple dashes:
---
title: My Page Title
description: A brief description for search and previews
---
Your content starts here...The title and description appear in search results, browser tabs, and social media previews. Write them thoughtfully.
Markdown Essentials
Headings
Use ## for main sections and ### for subsections. Jamdesk automatically generates a table of contents from your headings.
## Main Section
Content under the main section.
### Subsection
More detailed content here.Start with ## (h2) for your first heading. The page title from frontmatter serves as the h1.
Text Formatting
| Syntax | Result |
|---|---|
**bold** | bold |
*italic* | italic |
~~strikethrough~~ | |
`inline code` | inline code |
Lists
Unordered list:
- First item
- Second item
- Nested item
Ordered list:
1. First step
2. Second step
3. Third stepBlockquotes
> This is a blockquote. Use it for callouts or
> highlighting important information.This is a blockquote. Use it for callouts or highlighting important information.
Adding Components
Components are JSX elements you can use anywhere in your MDX. They're self-closing or wrap content:
{/* Self-closing component */}
<Card title="Example" icon="star" href="/path" />
{/* Component wrapping content */}
<Accordion title="Click to expand">
This content is inside the accordion.
</Accordion>Available Components
Jamdesk provides a rich set of built-in components:
Highlight features and create navigation
Organize content into switchable panels
Collapsible sections for optional content
Numbered procedures and tutorials
Tables
Standard Markdown tables work out of the box:
| Feature | Free | Pro |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
| Analytics | No | Yes || Feature | Free | Pro |
|---|---|---|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
| Analytics | No | Yes |
Comments
Add comments that won't appear in the rendered output:
{/* This is a comment - it won't be visible to readers */}