Mdx Deck

♠️ React MDX-based presentation decks
Alternatives To Mdx Deck
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Mdx Deck11,040
5 months ago144mitJavaScript
♠️ React MDX-based presentation decks
Code Surfer6,160709a month ago13January 21, 201942mitJavaScript
Rad code slides <🏄/>
Gatsby Starter Deck498
3 years agomitJavaScript
🗣 Create presentations using Gatsby, React & Markdown.
5 years ago19March 15, 20213JavaScript
🎞 Make stylish presentations in React, powered by styled-components
6 days ago22TypeScript
react-native based deck and campaign management app for ArkhamDB
a year ago14October 08, 20202mitJavaScript
Web Slides Made Easy
a year ago54apache-2.0TypeScript
Referee is a UI for using Spinnaker Kayenta as a standalone service.
The React Way48
8 years ago1JavaScript
An isomorphic React slide deck, about React.
7 years agomitJavaScript
A tiny Github client powered by React Native
React Poker45
34 years ago15March 23, 2018JavaScript
A React Library For Poker Card Game Animations
Alternatives To Mdx Deck
Select To Compare

Alternative Project Comparisons

MDX Deck

Award-winning React MDX-based presentation decks

Build Status Version Downloads

View demo

Getting Started

npm i -D mdx-deck

Create an MDX file and separate each slide with ---.

# Hello


## This is my deck


## The End

Add a run script to your package.json with the MDX Deck CLI pointing to the .mdx file to start the development server:

"scripts": {
  "start": "mdx-deck deck.mdx"

Start the development server:

npm start

Use the left and right arrow keys to navigate through the presentation.

Using MDX

MDX uses Markdown syntax and can render React components inline with JSX.


To import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.

import { Box } from 'theme-ui'

<Box color="tomato">Hello</Box>

Read more about MDX syntax in the MDX Docs.


MDX Deck uses Theme UI and Emotion for styling, making practically any part of the presentation themeable. It also includes several built-in themes to change the look and feel of the presentation.


MDX Deck includes built-in components to help with creating presentations, a Notes component for adding speaker notes, a Head component for the document head, Header and Footer components for persistent header and footer content, and a Steps component for adding multiple intermediate steps in a single slide.

Read more in the Components docs.

Third-Party Components

These optional libraries are intended for use with MDX Deck.

  • CodeSurfer: React component for scrolling, zooming and highlighting code.
  • mdx-code: Runnable code playgrounds for MDX Deck.
  • mdx-deck-live-code: Live React and JS coding in slides.

Note: please check with version compatibility when using these libraries.


Each slide can include a custom layout around its content, which can be used as a template for visually differentiating slides.

// example Layout.js
import React from 'react'

export default ({ children }) => (
      width: '100vw',
      height: '100vh',
      backgroundColor: 'tomato',
import Layout from './Layout'

# No Layout



# Custom Layout


The layout component will wrap the MDX elements within that slide, which means you can add custom layout styles or style child elements with CSS-in-JS.

Presenter Mode

Press Option + P to toggle Presenter Mode, which will show a preview of the next slide, a timer, and speaker notes.

presenter mode screenshot

The presentation can be opened in two separate windows at the same time, and it will stay in sync with the other window.

Keyboard Shortcuts

Key Description
Left Arrow, Page Up, Shift + Space Go to previous slide (or step in Steps)
Right Arrow, Page Down, Space Go to next slide (or step in Steps)
Option + P Toggle Presenter Mode
Option + O Toggle Overview Mode
Option + G Toggle Grid Mode

CLI Options

-p --port     Dev server port
-h --host     Host the dev server listens to
--no-open     Prevent from opening in default browser

Videos & Articles


See how others have used MDX Deck for their presentations.

Usage Examples

The following examples will open in CodeSandbox.


MIT License

Popular Deck Projects
Popular Reactjs Projects
Popular Content Management Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.