MDX Deck was created by Brent Jackson (@jxnblk) and is a tool for creating presentation deck websites using MDX. MDX provides the ability to use React’s JSX inside Markdown. The combination creates a powerful experience for building a web-based presentation deck. Here are a list of features, as listed on the MDX Deck GitHub Page:
- 📝 Write presentations in markdown
- ⚛ Import and use React components
- 💅 Customizable themes and components
- 0️⃣ Zero-config CLI
- 💁♀️ Presenter mode￼
- 📓 Speaker notes
First make sure you have node installed and paste the following as
package.json into a new file. Alternatively, you can run:
npm init to generate a
Next, install mdx-deck with the following command.
npm i -D mdx-deck
To create a simple presentation, create a file named
deck.mdx and copy the following contents into it.
# SLIDE 1 - LIST
Each slide is separated by
---. To see the presentation in action, add the following to the scripts section of
And run the following command to start the development server.
The presentation can be viewed at
The following keyboard shortcuts can be used to interact with the presentation.
|Left Arrow||Go to previous slide (or step in Appear)|
|Right Arrow||Go to next slide (or step in Appear)|
|Space||Go to next slide (or step in Appear)|
|Alt + P||Toggle Presenter Mode|
|Alt + O||Toggle Overview Mode|
|Alt + G||Toggle Grid Mode|
As you can see, you can get up and running with MDX Deck pretty quickly. There is a lot more to MDX Deck than I have shown here. Coming up 🔜, I will be exploring more of the features it provides, such as, importing react components, layouts, themes, speaker notes, and deploying to Netlify.