MDX, authors and richer JAMstack content

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, I spoke about how developers can empower their creators with MDX. A big thanks to Nicolas Goutay and Matthieu Auger from Theodo for organizing the meetup and to Algolia for hosting us.

MDX is a relatively new file format that just hit v1 in April.

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:

# 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

The video of the talk is forthcoming, but for now you can see the talk slides as well as the talk source code, which itself is written in MDX using an excellent slide-making open source project called mdx-deck.

Comments

[Oskar]

Thanks for this post. Indeed interesting project. My team gonna test it and eventually include to guidelines for building 500+ websites within very well known company ;)

[Josh Dzielak 🔆]

That's a lot of sites! Interested to hear how it goes :)

[Oskar]

Sure, let me come back to you with some questions & feedback around beginning of July.