mdx-deck: slide decks powered by markdown and react
Why it’s awesome, what it is, how it works, and how to use mdx-deck.
> Before we get started today, I want you to know that if you’re going to React Rally or you’re in the Salt Lake City area, you should pick up one of the few remaining early bird tickets to my React Fundamentals Workshop!
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:
import InteractiveGraph from './my-d3-graph' # Checkout this cool graph! > This is markdown, for real <interactivegraph></interactivegraph> **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
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!
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!
Looking for a job? Looking for a developer? Check out my job board: kcd.im/jobs
Learn more about React from me:
- Workshop.me - I’m giving my Intro to React workshop in person in Salt Lake City next week!
- egghead.io (beginners) - My Beginner’s Guide to React absolutely free on egghead.io.
- egghead.io (advanced) - My Advanced React Component Patterns course available on egghead.io!
- Frontend Masters - My Advanced React Patterns course in the form of a Workshop.
- DevTipsWithKent - My (week)daily livestreams where I often demo some React stuff (like Test a componentDidCatch ErrorBoundary component in React)
Things to not miss:
- Chain React 2018: Simply React by Kent C. Dodds - My Chain React Keynote talk. This is definitely worth a watch. Especially if you’re wondering why I’m always going on about React patterns :)
- React Conf 2018 is happening October 25th-26th in Henderson, Nevada. Enter the ticket lottery now!
- gatsby-mdx - MDX plugin for Gatsby by Christopher Biscardi. Pretty rad!
- docz.site - an awesome MDX-powered documentation tool by Pedro Nauck.
Some tweets from this last week:
> Backed by popular demand, I won’t shave until after @ReactRally in two weeks (unless I really can’t stand it at all). #BeardedKent ā 2 Aug 2018
> An interesting alternative to lodash and Ramda: Rameda: The first “data-first” and “data-last” utility library designed especially for TypeScript. github.com/remeda/remeda ā 3 Aug 2018
> The family trip is over and was awesome. š¤ š“š¢ ā 2 Aug 2018
The above photo (me with two days of stubble) is what inspired the conversation and poll that I should grow a beard š
This week’s blog post is “Polyfill as needed with polyfill-service”. It’s the published version of my newsletter from 2 weeks ago. If you thought it was good, go ahead and give it some claps (šx50) and a retweet:
Special thanks to my sponsor Patreons: Hashnode
P.S. If you like this, make sure to subscribe, follow me on twitter, buy me lunch, support me on patreon, and share this with your friends š
š Hi! Iām Kent C. Dodds. I work at PayPal as a full stack JavaScript engineer. I represent PayPal on the TC39. Iām actively involved in the open source community. Iām an instructor on egghead.io, Frontend Masters, and Workshop.me. Iām also a Google Developer Expert. Iām happily married and the father of four kids. I like my family, code, JavaScript, and React.