What MDX can do
- meta
- mdx
This post is written in MDX, so alongside ordinary Markdown — headings,
bold, links, code — it can do things plain
Markdown can’t.
Embedding a component
Here’s a <Callout> component imported at the top of the file and dropped
straight into the prose:
The same component, a different variant:
JavaScript expressions
Anything inside { ... } is evaluated as JavaScript. For example, this page was
rendered in 2026, and 2 + 2 = 4.
You can define values and map over them, too:
This site is built with 3 core technologies:
- Astro
- Tailwind
- Cloudflare Pages
Build-time vs. live: a clock
The expressions above are frozen at build time. The year below was baked into the HTML when the site was built and never changes on its own:
This page was built in 2026.
For something that updates in the browser you need a client island — a component whose JavaScript ships to the visitor and runs there. The clock below is exactly that, and it ticks every second:
When to use it
Reach for .mdx only when a post genuinely needs a component or computed
content — an interactive chart, a custom callout, an embedded demo. For ordinary
writing, plain .md is lighter and just as capable.