Skip to content
🎉MDX Conf — August 24th, 2020
MDX logo
v1.6.19

Markdown in Components

One great feature about MDX is that you can use Markdown within your JSX components.

Example

Lets say you wanted to create a custom <Note /> component. You could do something like this.

Using MDX 2:

CompileError: import is not supported (4:0)
1 : 
2 :     /* @jsxRuntime classic */
3 : /* @jsx mdx */
4 : import Note from './Note'
    ^^^^^^^^^^^^^^^^^^^^^^^^^

The same example, using MDX 1 (notice the need blank lines between the tags and the content):

CompileError: import is not supported (4:0)
1 : 
2 :     /* @jsxRuntime classic */
3 : /* @jsx mdx */
4 : import Note from './Note'
    ^^^^^^^^^^^^^^^^^^^^^^^^^
Edit this page on GitHub