MDX Basics

Every Jamdesk page is an .mdx file -- standard Markdown with JSX components like <Card>, <Tabs>, and <Accordion>.

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.

MDX is also one of the best formats for documentation that needs to be AI-readable. It's plain text (so AI tools can read and write it natively), version-controllable in Git, and structured enough for components without requiring 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>

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...

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.

Text Formatting

Lists

Unordered list:
- First item
- Second item
  - Nested item

Ordered list:
1. First step
2. Second step
3. Third step

Blockquotes

> 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 a rich set of built-in components:

Tables

Standard Markdown tables work out of the box:

| Feature | Free | Pro |
|---------|------|-----|
| Pages | 10 | Unlimited |
| Custom domain | No | Yes |

For advanced features like row highlighting, cell alignment, and spanning, use the Table component:

Comments

Add comments that won't appear in the rendered output:

{/* This is a comment - it won't be visible to readers */}

What's Next?