MDX field

The mdx field reads and writes content in MDX.

// Keystatic config
import { fields } from '@keystatic/core'

// Inside a collection...
schema: {
 richText: fields.mdx({
  label: 'Rich text'
 })
}

Keystatic will store content and retrieve it for you using the Reader API, but you are responsible for rendering the MDX content.

You can use community tools or build your own.

The extension lets you you to use .md files instead of .mdx for MDX collections or singletons:

content: fields.mdx({
  label: 'Content',
+   extension: 'md',
  // ...
})

The mdx field uses the new-generation and more capable content components:

richText: fields.mdx({
 label: 'Rich text',
+  components: {
+   // Add custom components here
+  } 
})

Checkout the content components docs to learn how to create advanced editing experiences with the mdx field.

Keystatic statically analyzses the MDX content. This means you cannot have import statements inside the MDX file.

This won't work:

---
title: My first post
date: 2024-02-17
---

import { Card } from '../components/Card'

# Hello, world!

<Card title="This week's update" />

Remove the import from the MDX file. Instead, pass the components you want to import to the component responsible for rendering the MDX content:

import { Card } from '../components/Card'

<MdxRenderer components={{ Card }} />

HTML tags in MDX are not supported by Keystatic. Replace them with their Markdown equivalent.

For example...

-  Learn more on the <a href="https://keystatic.com">Keystatic website</a>.
+  Learn more on the [Keystatic website](https://keystatic.com).

...or

-  <blockquote>Wow, this is pretty cool!</blockquote>
+  > Wow, this is pretty cool!

Find the latest version of this field's type signature at: https://docsmill.dev/npm/@keystatic/core#/.fields.mdx