π 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.
1 | { |
Next, install mdx-deck with the following command.
1 | 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.
1 | # SLIDE 1 - LIST |
Each slide is separated by ---
. To see the presentation in action, add the following to the scripts section of package.json
.
1 | "scripts": { |
And run the following command to start the development server.
1 | 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.
π 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.