Document Fields Demo
The document field type is a highly customisable rich text editor that lets content creators quickly and easily edit content in your system.
You can experiment with different configuration settings to see how these impact the editor experience.
See the document field guide for details on how to configure and render the document field in your Keystone application.
Configure the demo
The document field is highly configurable. The form below lets you control which features are enabled in the demo editor. You can see the changes both in the toolbar of the editor, and in the field configuration itself.
This is the document editor.
Here’s just a few things you can do with it:
Add layout blocks
and all the usual formatting options
You can insert links
and format text with **markdown syntax**
We’re really excited to show you what we’ve built, and what you can build with it!
The really cool stuff is behind the + button on the right of the toolbar – these are the Custom Components.
This component is the Notice, but you can build your own by defining their data schema (like you do your Keystone schema) and providing a React Component to render the preview.
They store structured data, and can be inserted (and edited!) anywhere in the document. You can even link them to other items in your database with the Relationship field type.
Custom components can also have props that are edited with an inline form, for more complex use cases (including conditional fields)
Try inserting a Hero component and you'll see how it works. Remember, you can build your own, so your content authors can insert components from your website's Design System, and your front-end still gets structured data to render!
This is a carousel
It’s built with component block array fields
Click edit to reorder it via drag and drop
This is the end of the editable document. Expand the blocks below to see how the editor has been configured and how the data is stored ↓
View the Field Config
This is the configuration which is being used for the editor. This will be updated when you select options to configure the demo.
import { config, list } from '@keystone-6/core';import { document } from '@keystone-6/fields-document';export default config({lists: {ListName: list({fields: {fieldName: document({formatting: true,links: true,layouts: [[1, 1],[1, 1, 1],[2, 1],[1, 2],[1, 2, 1]],dividers: true}/* ... */}),/* ... */},}),/* ... */},/* ... */});
View the Document Structure
Document field data is stored as a JSON string in the database.
[
{
"type": "heading",
"children": [
{
"text": "This is the document editor."
}
],
"level": 1
},
{
"type": "paragraph",
"children": [
{
"text": "Here’s just a few things you can do with it:"
}
]
},
{
"type": "layout",
"layout": [
1,
1
],
"children": [
{
"type": "layout-area",
"children": [
{
"type": "paragraph",
"children": [
{
"text": "Add layout blocks"
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "and all the usual "
},
{
"text": "formatting",
"code": true
},
{
"text": " options"
}
]
}
]
},
{
"type": "layout-area",
"children": [
{
"type": "paragraph",
"children": [
{
"text": "You can insert "
},
{
"type": "link",
"href": "https://keystonejs.com/",
"children": [
{
"text": "links"
}
]
},
{
"text": ""
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "and format text with **"
},
{
"text": "markdown syntax",
"bold": true
},
{
"text": "**"
}
]
}
]
}
]
},
{
"type": "component-block",
"component": "quote",
"props": {},
"children": [
{
"type": "component-block-prop",
"propPath": [
"content"
],
"children": [
{
"type": "paragraph",
"children": [
{
"text": "We’re really excited to show you what we’ve built, and what you can build with it!"
}
]
}
]
},
{
"type": "component-inline-prop",
"propPath": [
"attribution"
],
"children": [
{
"text": "The KeystoneJS Team"
}
]
}
]
},
{
"type": "component-block",
"component": "notice",
"props": {
"intent": "info"
},
"children": [
{
"type": "component-block-prop",
"propPath": [
"content"
],
"children": [
{
"type": "paragraph",
"children": [
{
"text": "The really cool stuff is behind the "
},
{
"text": "+",
"code": true,
"bold": true
},
{
"text": " button on the right of the toolbar – these are the "
},
{
"text": "Custom Components",
"bold": true
},
{
"text": "."
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "This component is the "
},
{
"text": "Notice",
"bold": true
},
{
"text": ", but you can build your own by defining their data schema (like you do your Keystone schema) and providing a React Component to render the preview."
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "They store structured data, and can be inserted (and edited!) anywhere in the document. You can even link them to other items in your database with the "
},
{
"text": "Relationship",
"bold": true
},
{
"text": " field type."
}
]
}
]
}
]
},
{
"type": "component-block",
"component": "notice",
"props": {
"intent": "success"
},
"children": [
{
"type": "component-block-prop",
"propPath": [
"content"
],
"children": [
{
"type": "paragraph",
"children": [
{
"text": "Custom components can also have props that are edited with an inline form, for more complex use cases (including conditional fields)"
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "Try inserting a "
},
{
"text": "Hero",
"bold": true
},
{
"text": " component and you'll see how it works. Remember, you can build your own, so your content authors can insert components from your website's Design System, and your front-end still gets structured data to render!"
}
]
}
]
}
]
},
{
"type": "component-block",
"component": "carousel",
"props": {
"items": [
{
"title": "This is a carousel",
"image": "https://images.unsplash.com/photo-1618172193763-c511deb635ca"
},
{
"title": "It’s built with component block array fields",
"image": "https://images.unsplash.com/photo-1633412802994-5c058f151b66"
},
{
"title": "Click edit to reorder it via drag and drop",
"image": "https://images.unsplash.com/photo-1635377090186-036bca445c6b"
}
]
},
"children": [
{
"type": "component-inline-prop",
"children": [
{
"text": ""
}
]
}
]
},
{
"type": "paragraph",
"children": [
{
"text": "This is the end of the editable document. Expand the blocks below to see how the editor has been configured and how the data is stored ↓",
"bold": true
}
]
}
]Related resources
Document Field Guide →
Keystone’s document field is a highly customisable rich text editor that stores content as structured JSON. Learn how to configure it and incorporate your own custom React components.
Example Project: Document Field →
Illustrates how to configure document fields in your Keystone system and render their data in a frontend application. Builds on the Blog starter project.