mdx-deck: slide decks powered by markdown and react
August 20, 2018
Why it's awesome, what it is, how it works, and how to use mdx-deck.
I've been giving presentations for years. I like many others started with PowerPoint because "that's how you make presentations." I moved on from that to Prezi when I was in college and I wowed all the crowds. I moved on from that because it felt too gimmicky for the kinds of presentations I was making. I tried Google Slides and that was cool because it's web-tech, but was a little limited and didn't look all that nice. Eventually I landed at slides.com. I've been with slides for pretty much my entire software development presentation career. You'll find pretty much 100% of the public presentations I've made on my slides page (including my first meetup talk).
I've been pretty happy with slides because it's really easy to create presentations and I've never been one to spend a ton of time on my slides. I just want to make them quickly and focus on practicing my presentation to communicate effectively what I want. But it definitely has some shortcomings and limitations, and there are some things about the WYSIWYG interface that really bug me. So I've always been on the lookout for a better experience creating slides. (Now's as good a time as any to admit that I've never used Keynote. But I didn't want to pay for it and I don't think that I'd be willing to spend the time working on the slides to make it any better than slides anyway).
Probably the biggest example of the limitations of slides that really bothers me is the difficulty of including interactive elements on the page. I always admire people who's slides are made with HTML, CSS, and JS because they can just add their interactive demos directly to their slides which increases "the wow factor" in addition to being generally more engaging. For a specific example, my slides for my "Simply React" keynote at ChainReact had several demos that were recorded video which is not awesome, but I also had an issue where I couldn't replay the videos (watch here). So the demos kinda fell flat a bit.
When master Ken Wheeler announced spectacle I was super excited! It is so awesome! I never got into it though because I'm just too lazy and wasn't willing to take the time to make slides out of React code and customize it to what I want it to be. So though I've tried it a few times, it never really took off for me.
A few months ago John Otander released the initial version of a new tool (and specification) called MDX. Months later Tim Neutkens announced MDX during the Zeit Day 2018 Keynote and the world's collective minds were blown (for example).
Here's a quick example of what's possible with MDX:
1import InteractiveGraph from './my-d3-graph'23# Checkout this cool graph!45> This is markdown, for real67<InteractiveGraph />89**That's right!** We're rendering a **React Component** in Markdown!
There's a bunch that's awesome from this. I've been wanting something like this for quite some time! Back when I was working on the website for glamorous (glamorous.rocks), I wanted to make all the docs in markdown to make it easier to internationalize, but I also wanted interactivity to be possible, so I came up with a super weird syntax to make this possible. It's pretty cool, and actually works similar to MDX at a fundamental level (uses a custom fancy plugin for remark), but it's way hacky and limited. This MDX thing is the REAL DEAL!
It's got the ease of slides that I love because it's just markdown. Couldn't be much easier than that! Then, to top that off, if I want something to be interactive, I can simply make that interactive thing a React component, then import that directly into my slide!! How awesome is that!? Way awesome is the answer!
mdx-deck has some pretty sweet features too:
- 📝 Write presentations in markdown
- ⚛️ Import and use React components
- 💅 Customizable themes and components
- 0️⃣ Zero-config CLI
- 💁 Presenter mode
- 📓 Speaker notes
- 📓 Production Export
- 📜 PDF Export
You combine this with Netlify's amazing GitHub Integration and put your slides in a GitHub project and you're off to the races with an automatically deployed slide deck!
I'm currently working on porting my slides for "Simply React". You can see the current state of the slides deployed on netlify here (and the pdf). I'm pretty jazzed about the ability to have such an easy way to create presentations in the browser that are easy to run locally, deployed to the web, create a PDF version, and totally interactive. This is just terrific.
Give it a look and try it for your next presentation. I think you'll love it. Good luck!