# mdx-deck — React MDX-Based Presentation Decks

> Create presentation slide decks using MDX (Markdown + JSX), with themes, speaker notes, and presenter mode built in.

## Install

Save as a script file and run:

# mdx-deck — React MDX-Based Presentation Decks

## Quick Use
```bash
npm init mdx-deck my-deck
cd my-deck
npm start
```
```mdx
# Hello World

This is a slide.

---

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-2d4e0784
Author: Script Depot