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

Next, install mdx-deck with the following command.

## 🏃‍♀️ Getting Started

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

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

And run the following command to start the development server.

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.

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