Was this page helpful?

Example - Customize a field editor

Field editors sometimes need manual tweaking to fullfil a specific use case. For example you might want to show a special type of reference card or to add custom behaviour to your markdown editor. This is possible using Contentful's app framework, but in the past would have required you to build a new editor from scratch. Contentful's native field editors can act as a base for these custom editors, making the process of developing apps much easier.


Let's take a look at a specific example. Imagine you are working with references and you want to influence how your users add and create new references to an entry. Here a reference field editor in its original shape: A reference field editor

In contrast the same reference field editor but customized to hide the button for creating a new entry: A customized reference field editor

The snippet below shows how the reference field editor can be changed so it hides the button for adding new references if a certain condition is met.

const NoMoreThanTwo = ({ fieldSdk }) => {
  const [canAddMore, setCanAddMore] = React.useState(false);
  // Subscribing to field value changes to get the number of linked references.
  // Use the number of linked references to determine if adding new references should be allowed or not.
  React.useEffect(() => {
    return fieldSdk.field.onValueChanged((value) => {
      if (value.length >= 2) {
      } else {
  return (
    // Pass the parameter into the original field editor component.
        instance: { canCreateEntity: canAddMore, canLinkEntity: canAddMore },


It now requires less work to change the behavior of Contentful's native editing components. Get the editor you need and use it as a base for your own custom development.

Find the field editors on GitHub.