Using MDX

The MDX block in the Outstatic editor lets you add raw MDX to a document without it being escaped. You can drop in JSX component tags, imports, or HTML and Outstatic saves the source exactly as written — the frontend then renders the markdown around them and your React components in place.

This post uses three example components registered in MDXComponentsMap: Callout, Counter, and ApiFetcher. Open the post in the editor and the MDX block to see the raw source.

A simple counter

The Counter is a small client component using useState. Click the buttons to increment or decrement the value:

You can also pass props to change the starting value or the step size:

Fetching data on click

The ApiFetcher is a client component that calls an API when you click the button. The default fetches the Outstatic repo from the GitHub API and shows its star count and description:

You can point it at any JSON endpoint with the url prop.

Reusable blocks from the Block Library

For components you reach for often, the Block Library lets you register reusable MDX blocks that appear in the slash command menu. Each block defines a component name, the props editors fill in, and any imports it needs — so inserting a block becomes a single click instead of hand-writing JSX.

This post uses a Youtube block defined in outstatic/blocks.json. Type / in the editor, pick Youtube, and fill in the video URL:

Rendering MDX on your site

The MDX block only controls how content is edited and saved. Your frontend still needs an MDX pipeline to turn the source into rendered React. This demo uses mdx-bundler — see src/lib/mdx-server.ts and src/components/mdx/mdx-component.tsx for the wiring.