MDX Basics
Write documentation in Markdown with embedded React components like Card, Tabs, and Accordion. This is the syntax behind every Jamdesk page.
Every Jamdesk page is an .mdx file: standard Markdown with JSX components like <Card>, <Tabs>, and <Accordion>.
What is MDX?
MDX lets you write standard Markdown and embed JSX components in the same file. Write headings, lists, and code blocks in Markdown, then drop in components like <Card> or <Tabs> wherever you need interactivity.
MDX is plain text that AI tools can read and write natively. It is version-controllable in Git. It holds components without a proprietary format.
# Welcome to My Docs
This is regular **Markdown** with a component below:
<Card title="Quickstart" icon="rocket" href="/quickstart">
Jump right in with our quickstart guide.
</Card>The free MDX Validator catches syntax errors before a build. The free MDX Formatter cleans up spacing and indentation. Paste in a page to check or tidy it without running the CLI.
Page Structure
Every MDX page starts with frontmatter, the 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.
Markdown Essentials
Headings
Use ## for main sections and ### for subsections. Jamdesk builds the 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 is 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="/introduction" />
{/* Component wrapping content */}
<Accordion title="Click to expand">
This content is inside the accordion.
</Accordion>Available Components
Jamdesk provides these built-in components:
Tables
Standard Markdown tables work out of the box:
| Feature | Starter | Team |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes || Feature | Starter | Team |
|---|---|---|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
Use the Table component for row highlighting, cell alignment, and spanning:
| Feature | Starter | Team |
|---|---|---|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |
See Tables for full component documentation including row/cell highlighting, column spanning, and styling options.
Comments
Add comments that won't appear in the rendered output:
{/* This is a comment - it won't be visible to readers */}