MDX, authors and richer JAMstack content
Tags: jamstack, webdev, react, javascript
Published: 2019-05-31 17:25:39

---
title: MDX, authors and richer JAMstack content
published: true
canonical_url: https://developermode.com/blog/mdx-authors-jamstack/
description: "MDX makes JSX components usable in markdown. This allows developers to create rich, interactive components—think forms, polls, charts, layouts and more—which authors can embed elegantly inside of their content."
tags: ["jamstack", "webdev", "react", "javascript"]
---

Thanks to the growth of the JAMstack, developers are building performant and secure websites as quickly as ever. Content creators are benefitting from this renaissance too, but at the same time many authors are reaching the limitations of markdown as an authoring tool. 

The good news is there’s now a better way: a new format called MDX that empowers content creators to **embed dynamic components inside of their markdown**.

At the 3rd edition of the [JAMstack Paris meetup](https://jamstack.paris), I spoke about how developers can empower their creators with MDX. A big thanks to [Nicolas Goutay](https://twitter.com/phacks) and [Matthieu Auger](https://twitter.com/matthieuauger) from [Theodo](https://www.theodo.fr/) for organizing the meetup and to [Algolia](https://algolia.com/) for hosting us.

[![MDX, authors and richer JAMstack content by Josh Dzielak](https://res.cloudinary.com/dzello/image/upload/w_960/v1559305360/developermode/mdx-talk-title-slide)](https://mdx-talk.developermode.com/)

[MDX](https://mdxjs.com/) is a relatively new file format that just [hit v1 in April](https://mdxjs.com/blog/v1).

**MDX makes JSX components usable in markdown**. This allows developers to create rich, interactive components—think forms, polls, charts, layouts and more—which authors can embed elegantly inside of their content.

Here's what an `.mdx` file looks like, using the example of embedding a question & answer poll inline with normal markdown content:

```text
# Hello, *world*!

This is just markdown here. The JSX is below.

<Poll>
  <Question>What is your favorite language?</Question>
  <Answer>English</Answer>
  <Answer>French</Answer>
  <Answer>JavaScript</Answer>
</Poll>

Markdown continues down here.
```

JSX syntax is tag-based like HTML, but the abstractions are higher-level, and developers can choose what JSX components to make available to authors. 

**Developers can (and should) design components in a way that makes them easier for even non-technical authors to use.**

MDX holds a lot of early promise for making the JAMstack more authorable, a stated goal of the MDX creator:

> "What I mean by **authorable** is that it's a format that can be naturally written in by all members of a cross-functional team after some learning - from engineering to marketing." — MDX author [John Otander](https://twitter.com/john0)

The video of the talk is forthcoming, but for now you can see [the talk slides](https://mdx-talk.developermode.com/) as well as the [talk source code](https://github.com/developermode/mdx-talk), which itself is written in MDX using an excellent slide-making open source project called [mdx-deck](https://github.com/jxnblk/mdx-deck).