Learning MDX Deck: Getting Started

Learning MDX Deck: Getting Started

πŸ™‹ What is MDX Deck?

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

πŸ—οΈ Installation

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 package.json file.

1
2
3
4
5
6
7
8
9
10
{
"name": "demo-mdx-deck",
"version": "1.0.0",
"description": "Demo MDX Deck",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Dave Follett",
"license": "MIT"
}

Next, install mdx-deck with the following command.

1
npm i -D mdx-deck

πŸƒβ€β™€οΈ Getting Started

To create a simple presentation, create a file named deck.mdx and copy the following contents into it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# SLIDE 1 - LIST

* I am a bullet list item
* I am another bullet list item
* I am another bullet list item

---

# SLIDE 2 - HEADERS

## Header 2
### Header 3
#### Header 4
##### Header 5

---

# SLIDE 3 - TABLE

| Fruit | Weight | Cost |
| ------------- | ---------| ----- |
| Strawberries | 16oz | $3.99 |
| Blueberries | 8oz | $2.99 |
| Grapes | 12oz | $3.75 |

Each slide is separated by ---. To see the presentation in action, add the following to the scripts section of package.json.

1
2
3
"scripts": {
"start": "mdx-deck deck.mdx"
}

And run the following command to start the development server.

1
npm start

The presentation can be viewed at http://localhost:8080/.

Animation of the MDX Deck example

⌨️ Keyboard Shortcuts

The following keyboard shortcuts can be used to interact with the presentation.

Key Description
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

🏁 Conclusion

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.

πŸ”œ Up Next

Next in the Learning MDX Deck series is Learning MDX Deck: Deploy To Netlify, which will show how to deploy MDX Deck to Netlify.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×