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.

{
"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.

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.

# 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.

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

And run the following command to start the development server.

npm start

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

⌨️ Keyboard Shortcuts

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

🏁 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.