Spectrum is now read-only. Learn more about the decision in our official announcement.

Frontend Cafe

A community for discussing frontend engineering news, best practices, and new technologies.


.mdx proposal

February 9, 2018 at 5:43pm
For a while now at ZEIT we've been using markdown-in-js as a pre-processor with Babel, so that we can write static documents more practically.
In practice, our pages end up looking something like this:
import * as components from './components/text'
import Video from ./components/video'
export markdown(components)`
# hello there
My code snippet ${<Image />}
In addition to letting us quickly write markdown, it has some really powerful benefits:
  • It's still JS, which means we can do imports, define helpers, assert that it's valid via a linter, etc.
  • We can embed JSX components inside Markdown. This is a must for us, because we like writing blog posts ( that have diverse content inside.
However, in my opinion, a lot of the benefits of "writing markdown" are lost. For example, as you see above, escaping code blocks becomes cumbersome.
As a result, I've been playing with an idea in my mind for a potential custom webpack loader and a new format called mdx, which brings the "best of both worlds" of JSX and Markdown.
Imagine my-blog-post.mdx:
import Video from '../components/video'
# My blog post
my code!
And here's a video:
<Video width={300} src="video.mp4" />
This looks great IMO, however, some important problems remain:
  • How do we lint? It should be impossible to include <Vid> because it's not imported, but <Video> should work. Can we extend eslint to understand .mdx ?
  • How do we defined the default set of components? One option would be to pass them to the webpack loader configuration
  • How do we override one component? Let's say we want to use a custom paragraph renderer. An idea here would be to standarize on a series of names, so that you can just do import P from '../components/paragraph'
  • How do we prettify it? Another issue we have with our markdown pages is that the markdown inside ends up looking really ugly, unless you painstakingly format it by hand. Can we extend prettier to understand .mdx?
If someone in the community wants to start playing around with a prototype, please share!
Show previous messages

February 13, 2018 at 9:32am
I'd like to ask regarding what exactly are the requirements in using Javascript + Integrating Markdown ? Regarding creating content, what about going the other way ? E.g. using Markdown, typing code and with markdown parsers you can handle javascript code snippets ?
that looks incredible!

February 14, 2018 at 2:49am
This is totally brilliant. 🌟

September 28, 2018 at 10:05am
I started an eslint plugin for mdx:

September 28, 2018 at 7:31pm
What are the uses of using markdown inside js?

June 24, 2019 at 2:24pm
Hi! has anyone used mdx-deck as embed inside a react app? Is it possible?
I have a feeling this is not the best place for this question.. 🤔