MDX Lets a Blog Post Become a Workshop

Markdown is great for essays. MDX is better when the essay needs to teach by letting the reader touch the idea.

A repeatable MDX post structure

Live code belongs where it clarifies

Live field demoreact-ts

import * as React from 'react'

export default function PricingNudge() {
const [hours, setHours] = React.useState(6)
const value = hours * 95
return <main style={{fontFamily:'system-ui', padding:24}}> <h2>Maintenance estimate</h2><input aria-label='hours' type='range' min='1' max='20' value={hours} onChange={(event) => setHours(Number(event.target.value))} style={{width:'100%'}} /><p>{hours} hours of monthly care is roughly ${value} of protected time.</p></main>
}

Open Sandbox

Component call

example.mdx

text

<SwatchBoard title="Post palette" items="Ink|#111113|Body copy and code surfaces;Signal|#e20074|Primary action and emphasis;Mint|#05f2af|Live demos and success states" />

A strong post should leave the reader with a working mental model, not just a paragraph they liked.