loading...
Cover image for Learning MDX Deck: Getting Started

Learning MDX Deck: Getting Started

davefollett profile image Dave Follett Originally published at davefollett.io on ・2 min read

πŸ™‹ 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/.

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.

Posted on by:

davefollett profile

Dave Follett

@davefollett

Husband, father of πŸ‘§ πŸ‘§, and software developer living in the Metro Detroit area. Interested in continuous learning, tinkering, and exploring new technology. LEARN.always

Discussion

pic
Editor guide
 

Finally got my head around this, really really cool! I'd love to re-use react components in my slides.

 

Thanks Joe. I recently learned that MDX can be used with Gatsby too. Maybe it could help with some of the sites you are building.

mdxjs.com/getting-started/gatsby/