Learning MDX Deck: Getting Started

#react #mdx #slides #javascript

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

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.