MDX - JSX in Markdown
K 👓 Aug 29
If you read my article about Storybook, you know that can be nice to be able to run components on its own, without being embedded into an huge application. For example when you need to check if everythign still works or if you need examples for your documentation.
Also, some applications are mainly text-heavy but need some more complex parts, like charts or animations, so writing them with Markdown would be a bit of a pain. For example presentation slides.
To get up and running quickly, simply use this command:
npm init mdx
This will setup a Next.js project pre-configured for MDX. Then you can start to write your MDX documents.
Here a simple example:
import Graph from './components/graph' ## My Heading A nice paragraph that tells people about some data, followed by a `<Graph>` component that visualizes this data. <Graph />
- Heading and paragraph from Markdown
- JSX element from React
The nice thing is everything is a component, so you can even import other MDX and even Markdown files.
MDX is a really interesting approach to make Markdown more flexible. Let's see what will be done with it in the future. :)