explaingit

jxnblk/mdx-deck

★ 11,485JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

MDX Deck lets you build browser-based slide presentations by writing Markdown files, with support for importing React components directly into individual slides.

Mindmap

mindmap
  root((MDX Deck))
    What it does
      Slide presentations
      Markdown-based
      Browser rendered
    Features
      React components
      Presenter mode
      Speaker notes
      Custom themes
    Tech stack
      JavaScript React
      MDX format
      Theme UI
      Emotion CSS
    Use cases
      Conference talks
      Technical demos
      Team presentations
    Setup
      npm install
      Write MDX file
      Run dev server
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a conference talk presentation entirely in Markdown, deploying it as a static website.

USE CASE 2

Embed a live React component or code demo directly inside a slide.

USE CASE 3

Use presenter mode to see speaker notes and a next-slide preview while the audience sees the main slides.

USE CASE 4

Apply a custom color theme to slides by providing a Theme UI configuration object.

Tech stack

JavaScriptReactMDXTheme UI

Getting it running

Difficulty · easy Time to first run · 30min

Requires Node.js and npm, each slide deck runs as a local dev server.

MIT license: use freely for any purpose, including commercial, with no restrictions beyond keeping the copyright notice.

In plain English

MDX Deck is a tool for creating slide presentations using Markdown files. Instead of building slides in presentation software or a web-based tool, you write each slide as a section of a plain-text Markdown file, separating slides with --- dividers, and MDX Deck turns it into a presentation you can view and navigate in a web browser. Because it uses MDX, a format that extends Markdown with support for React components, you can drop interactive components directly into your slides. If you have a chart, code demo, or custom UI element built in React, you can import it into a slide the same way you would import it into a React app. This is what sets MDX Deck apart from slide tools that only support static text and images. Getting started requires installing the npm package, creating an MDX file with your slide content, and running a dev server. You navigate between slides using the left and right arrow keys in the browser. A presenter mode, activated with a keyboard shortcut, shows a preview of the next slide, a timer, and speaker notes in a separate window while the audience sees only the main slides. Both windows stay in sync automatically. Theming uses Theme UI, which means you can change fonts, colors, and layout by providing a theme object. Several built-in themes are included to get started quickly. Additional components are available for speaker notes, persistent header and footer content, and multi-step animated reveals within a single slide. The project is JavaScript-based and MIT-licensed.

Copy-paste prompts

Prompt 1
How do I add speaker notes to a slide in MDX Deck and switch to presenter mode during a talk?
Prompt 2
I want to import a React chart component into my MDX Deck presentation. Show me the correct syntax.
Prompt 3
How do I deploy my MDX Deck presentation as a static website on Netlify or Vercel?
Prompt 4
Create a custom Theme UI theme for MDX Deck with a dark background, white text, and monospace code font.
Prompt 5
How do I add a multi-step reveal animation to a single slide using the Steps component in MDX Deck?
Open on GitHub → Explain another repo

← jxnblk on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.