MDX field
The mdx
field reads and writes content in MDX.
Example usage
// 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.
Use .md files instead of .mdx
The extension
lets you you to use .md
files instead of .mdx
for MDX collections or singletons:
content: fields.mdx({
label: 'Content',
+ extension: 'md',
// ...
})
Content components
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.
MDX limitations in Keystatic
No import statements
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 }} />
No HTML tags
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!
Inline
By default, fields.mdx
will output content in a seperate file to the main data or below the main data if using format.contentField
. If you want to have multiple pieces of content in the same file, you can use fields.mdx.inline(...)
instead:
someContent: fields.mdx.inline({
label: 'Some content',
})
this will write content next to other fields like this instead of in a different file:
someContent: |
# Title
Some content
Type signature
Find the latest version of this field's type signature at: https://docsmill.dev/npm/@keystatic/core#/.fields.mdx