Writing Interactive Documents in Markdown with MDX

Photo by Ricardo Gomez Angel on Unsplash
Example of an interactive MDX document linking a dataset to a table, form, and dynamic values displayed in a text and chart: https://mdx-observable.netlify.com/dataviz

MDX

import { Table } from './table-component';  // React components!
import Chart from './chart-component'; // React components!
import data from './data' // JavaScript data file
# Markdown HeadingSome content<Table data={data} />Here is a chart of the data:<Chart data={data} color="purple" />

MDX documents are static by default

Using MDX-Observable to add state

import { State, Observe } from "mdx-observable";# Counter<State initialState={{ count: 0 }}><Observe>
{({ setState }) => (
<button onClick={() => setState(s => ({ count: s.count + 1 }))}>
Click me
</button>
)}
</Observe>
<Observe>
{ ({ count }) => (`The button has been clicked ${count} times`) }
</Observe>
</State>

Why we need interactive documents

Other ways to write interactive documents

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store