This site runs best with JavaScript enabled.

mdx-deck: slide decks powered by markdown and react

August 20, 2018

Video Blogger

Photo by Ash Edmonds on Unsplash


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.

Enter MDX

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'
2
3# Checkout this cool graph!
4
5> This is markdown, for real
6
7<InteractiveGraph />
8
9**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!

Enter mdx-deck

Recently, the (seriously) amazing Brent Jackson created and announced something absolutely amazing: mdx-deck

gif showing mdx-deck demo

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:

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!

Conclusion

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!

Discuss on TwitterEdit post on GitHub

Share article
loading relevant upcoming workshops...
Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. He's taught hundreds of thousands of people how to make the world a better place with quality software development tools and practices. He lives with his wife and four kids in Utah.