mdx-deck — React MDX-Based Presentation Decks

Second Slide

• Bullet one
• Bullet two

## Introduction

mdx-deck lets you write presentation slides in MDX, combining Markdown simplicity with the power of React components. Slides are separated by horizontal rules (---) and support themes, layouts, and live code examples.

## What mdx-deck Does

- Converts MDX files into navigable slide presentations
- Supports keyboard navigation, touch gestures, and URL-based slide routing
- Includes presenter mode with speaker notes and a timer
- Allows embedding any React component directly in slides
- Exports presentations as static HTML or PDF

## Architecture Overview

mdx-deck uses MDX to compile Markdown with JSX into React components. Each --- separator creates a new slide. The runtime wraps slides in a deck container that handles navigation state, transitions, and theming. Gatsby is used under the hood for static site generation and hot module replacement during development.

## Self-Hosting & Configuration

- Bootstrap with npm init mdx-deck or add to an existing project
- Write slides in .mdx files with --- as the slide separator
- Apply themes by importing and exporting from the MDX file
- Add speaker notes with the Notes component below slide content
- Build static output with mdx-deck build for deployment to any host

## Key Features

- Write slides in Markdown with embedded React components
- Built-in presenter mode with notes, timer, and preview
- Theming system with composable theme objects
- Code syntax highlighting via Prism
- PDF export for offline sharing

## Comparison with Similar Tools

- **Slidev** — Vue-based with more built-in features; mdx-deck uses React and MDX
- **reveal.js** — HTML/JS framework; mdx-deck uses Markdown-first authoring
- **Marp** — Markdown to slides via CSS; mdx-deck supports full React components
- **Spectacle** — React presentation library; mdx-deck simplifies with MDX authoring
- **Remark** — Markdown-based; mdx-deck adds JSX component support

## FAQ

**Q: Can I use custom React components in slides?**
A: Yes. Import any React component at the top of the MDX file and use it inline.

**Q: How do I add speaker notes?**
A: Use the built-in Notes component: `<Notes>These are my notes</Notes>`.

**Q: Can I export to PDF?**
A: Yes. Run mdx-deck pdf to generate a PDF of all slides.

**Q: Does it support code highlighting?**
A: Yes. Fenced code blocks are highlighted with Prism by default.

## Sources

- https://github.com/jxnblk/mdx-deck
- https://mdx-deck.jxnblk.com/