Skip to Page NavigationSkip to Page NavigationSkip to Content

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:

Carousel

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
      }
    ]
  }
]