DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Josh Dzielak πŸ”† for Orbit

Posted on • Updated on • Originally published at developermode.com

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, authors and richer JAMstack content by Josh Dzielak

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.
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
oskarkaminski profile image
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 ;)

Collapse
 
dzello profile image
Josh Dzielak πŸ”† Author

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

Collapse
 
oskarkaminski profile image
Oskar

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

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await