MDX

Source file extensions: .mdx

MDX is an authorable format that lets you seamlessly write JSX in Markdown documents.

You can import modules from npm by using their bare name:

import { mdx } from "@mdx-js/react";
import { Box, Heading, Text } from 'rebass'

# Here is a JSX block

It is using imported components!
<Box>
<Heading>Here's a JSX block</Heading>
<Text>It's pretty neat</Text>
</Box>

You can import a module from the component, use the relative path with ./:

import { mdx } from "@mdx-js/react";
import MyComponent from './MyComponent';

# Using the component I just coded

<MyComponent></MyComponent>

Requirements

The file needs to import mdx at the top of the mdx file.

For React

import { mdx } from '@mdx-js/react';

For Preact

import { mdx } from '@mdx-js/preact';

References

Quick example

doc.mdx

import { mdx } from "@mdx-js/react";
import MyComponent from './MyComponent';

# Hello, _world_!

Below is an example of JSX embedded in Markdown. <br />
**Try and change the background color!**`

<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
<h3>This is JSX</h3>
</div>

<MyComponent></MyComponent>