Learning MDX Deck: Getting Started
Tags: react, mdx, slides, javascript
Published: 2019-05-13 18:12:34

---
title: Learning MDX Deck: Getting Started
published: true
tags: react,mdx,slides,javascript
canonical_url: https://davefollett.io/2019/05/12/mdx-deck-getting-started/
cover_image: https://davefollett.io/2019/05/12/mdx-deck-getting-started/cover-learning-mdx-deck-getting-started.jpg
series: Learning MDX Deck
---

## 🙋 What is MDX Deck?

[MDX Deck](https://mdx-deck.jxnblk.com/) was created by Brent Jackson ([@jxnblk](https://twitter.com/jxnblk)) and is a tool for creating presentation deck websites using [MDX](https://mdxjs.com/). [MDX](https://mdxjs.com/) provides the ability to use [React’s](https://reactjs.org/) [JSX](https://reactjs.org/docs/introducing-jsx.html) inside [Markdown](https://en.wikipedia.org/wiki/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](https://github.com/jxnblk/mdx-deck):

- 📝 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](https://nodejs.org/en/) installed and paste the following as `package.json` into a new file. Alternatively, you can run: `npm init` to generate a `package.json` file.


```json
{
"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](https://davefollett.io/2019/05/12/mdx-deck-getting-started/mdx-deck-demo.gif)

## ⌨️ 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](http://netlify.com).