MDX Example

This post demonstrates MDX capabilities with custom components

Exploring MDX in Keystatic

This is an example of using MDX in a Keystatic project. MDX allows you to use JSX components within your markdown content.

Basic Markdown Features

You can use all the standard markdown features like:

Code Blocks

Using Custom Components

Below is an example of a custom React component used within MDX:

ℹ️Important Information

This is an info box component rendered within your MDX content.

It can contain markdown formatting and multiple paragraphs.

⚠️Warning

Be careful when working with custom components!

✅Success

You’ve successfully integrated MDX with Keystatic!

❌Error

Something went wrong. Please check your configuration.

function getHeadings() { return [ { depth: 2, slug: 'basic-markdown-features', text: 'Basic Markdown Features' }, { depth: 2, slug: 'code-blocks', text: 'Code Blocks' }, { depth: 2, slug: 'using-custom-components', text: 'Using Custom Components' }, { depth: 2, slug: 'advantages-of-mdx', text: 'Advantages of MDX' }, ]; }

Advantages of MDX

  1. Component Reuse - Create and reuse UI components within your content
  2. Dynamic Content - Generate content dynamically with JavaScript
  3. Rich Interactivity - Add interactive elements to your documentation
  4. Full Markdown Support - Maintain all the benefits of standard markdown

That’s it! Now you have a powerful content authoring system that combines the simplicity of markdown with the power of React components.