Repository files navigation

Award-winning ReactMDX-based presentation decks

• 📝 Write presentations in markdown
• ⚛️ Import and useReact components
• 💅 Customizablethemes and components
• 0️⃣ Zero-config CLI
• 💁‍♀️Presenter mode
• 📓Speaker notes

View demo

• Getting Started
• Using MDX
• Theming
• Components
• Layouts
• Presenter Mode
• Keyboard Shortcuts
• CLI Options
• Videos & Articles
• Examples

npm i -D mdx-deck

Create anMDX file and separate each slide with---.

#Hello---##This is my deck---##The End

Add a run script to yourpackage.json with the MDX Deck CLIpointing 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.

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'<Boxcolor="tomato">Hello</Box>

Read more about MDX syntax in theMDX Docs.

MDX Deck usesTheme UI andEmotion 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.

• See the list of availableThemes
• Read more about theming in theTheming docs.

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

Read more in theComponents docs.

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 atemplate for visually differentiating slides.

// example Layout.jsimportReactfrom'react'exportdefault({ children})=>(<divstyle={{width:'100vw',height:'100vh',backgroundColor:'tomato',}}>{children}</div>)

importLayoutfrom'./Layout'#No Layout---<Layout>#Custom Layout</Layout>

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

PressOption + P to togglePresenter Mode,which will show a preview of the next slide, a timer, and speaker notes.

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

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

• Egghead Tutorial byAndrew Del Prete.
• mdx-deck: slide decks powered by markdown and react byKent C. Dodds
• Make Fast & Beautiful Presentations with MDX-Deck byHarry Wolff (Demo)
• What is MDX byKent C. Dodds
• Build a Custom Provider Component for MDX-Deck byKyle Shevlin

See how others have used MDX Deck for their presentations.

• Design Systems & React byDiana Mounter
• Bringing Brazil to the Cloud, Now byGuillermo Rauch
• Simplify React byKent C. Dodds
• I Got 99 Problems but GraphQL Ain't One bySara Vieira
• Stop de #divFest bySara Vieira
• MDX, authors and richer JAMstack content byJosh Dzielak
• Components as Data: A Cross Platform GraphQL Powered Component API byLuke Herrington
• A short history of webdevs future 🔮 byHendrik Wallbaum

The following examples will open in CodeSandbox.

• Basic Example
• Syntax Highlighting
• Steps
• Head
• Header & Footer

• MDX
• Gatsby
• Theme UI
• Emotion
• Spectacle

MIT License