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 React from 'react';
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 React from 'react';
import { mdx } from '@mdx-js/react';
import MyComponent from './MyComponent';

# Using the component I just coded

<MyComponent></MyComponent>

Requirements

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

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

References

Quick example

doc.mdx

import React from 'react';
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!**

<MyComponent></MyComponent>