Meet mdx and mdx-deck

Let's say you need to create a presentation

What options do you have? Keynote, Power Point or Google Slide may be the obvious choices. Let's say you need to create a presentation and you are a geek. What options do you have now?

Meet mdx

Mdx is a library which lets you write JSX code inside Markdown files. If you haven't used JSX so far, think of it like an XML extension to EcmaScript (aka JavaScript) - find examples in the JSX link. If you've ever written a React component, you've written JSX.

Markdown is one of the tools which once you use it, you can't imagine your life without it. It's created by two amazing people: John Gruber - well known tech writer, and Aaron Swartz - co-founder of Reddit. Markdown let's you write formatted documents with a very clean syntax. Mdx is a popular project on Github with over 6k stars.

Meet mdx-deck

One of the project based on mdx is mdx-deck which brings us to the main topic of this post: creating a geeky presentation.

To get started with mdx-deck you need node and npm, which you may alredy have installed. It takes 2 minutes to get started:

1. make a new directory and run npm init -y
2. run npm i -S mdx-deck
3. create a new file named deck.mdx containing

# Hello World
---
## This is the second slide

4. add a new script command in package.json

"start": "mdx-deck deck.mdx"

5. run npm start and you'll see the new presentation in the browser.

It may not seem like much, but you have 2 slides. You can see them in the browser and adding another one is VERY simple. Just add 3 dashes --- on a new line and you'll have a new slide. And that's not all, access the presenter mode by pressing alt + p and overview mode by pressing alt + o.
By the way, # means h1 and ## means h2 in Markdown. Markdown is not so scary!

Theming

Let's add some color. One the first line of deck.mdx add this line followed by an empty line.

export { yellow as theme } from 'mdx-deck/themes'

You just changed the theme, check the browser. yellow is one of the default themes provided by mdx-deck. Of course, you can define your own theme. I forgot to mention, use arrow keys or click on the left/right edge to change the slide. Or you can use the space key to move to the next slide.

Embed React components

Cool enough? The best part is yet to come! You can add React components inside the presentation. So let's say you have this component:

import React from 'react'

export default ({ name }) => {
  return (
    <span>{ 'Hi ' + name }</span>
  );
}

You can easily use that component inside your presentation like this:

export { yellow as theme } from 'mdx-deck/themes'

# Hello World
---
## This is the second slide
---
## Embed React components
import Hi from './Hi'

<Hi name="Peter" />

Your component can be more complex if you want to. For example I added this bar chart component:

import React from 'react'
import ReactChartkick, { BarChart } from 'react-chartkick'
import Chart from 'chart.js'

ReactChartkick.addAdapter(Chart)

const data = [
  [ 'React', 8 ],
  [ 'React Native', 9 ],
  [ 'Node', 8 ],
  [ 'Linux', 7 ],
  [ 'MySQL', 7 ],
  [ 'Mongo', 7 ],
  [ 'Elasticsearch', 6 ],
  [ 'Docker', 5 ],
]

export default () => {
  return (
    <div style={{ width: 700 }}>
      <BarChart
        data={data}
        colors={["#C32148"]}
      />
    </div>
  );
}

Here is how that looks:

The label "React Native 9" appeared as I hovered the React Native bar. So you can interact with the React components you embed in your presentation.

Code snippets

Adding code snippets is easy as well:

---
## Code Snippet
.```jsx
export default () => {
  return (
    <div>
    <BarChart
      data={data}
      colors={["#C32148"]}
    />
    </div>
  );
}
.```
---

Note: I prefixed the three backticks with a dot to avoid the code snippet formatting used by this platform. You don't need to add it in real life scenario.

And they look pretty good too!

Other features

Other cool features worth to mention are: split view (horizontal and vertical), support for tables, support for images, layouts and more.

To build your presentation into HTML + CSS + JS run mdx-deck build deck.mdx so you can deploy the result if needed.

Here you can find the presentation I little built. I hope you enjoyed this one and maybe next time you build a presentation mdx-deck will be one option!

Code on!