> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/developers/docs/_mcp/server.

# Example - Customize a field editor

> An example how to customize an individual field editor | Get the editor you need and use it as a base for your own custom development

Field editors sometimes need manual tweaking to fulfil 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](/extensibility/app-framework/sdk),
but in the past would have required you to build a new editor from
scratch. [Contentful's native field editors](https://github.com/contentful/field-editors/)
can act as a base for these custom editors, making the process
of developing apps much easier.

## Overview

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](/developers/docs/_fern-files/contentful.docs.buildwithfern.com/fa4f2dfeae630472cc584849b5ecf796738983e154fc9bbca04d053610f73b1f/docs/assets/images/reference-field-editor-original.png)

In contrast the same reference field editor but customized to hide
the button for creating a new entry:
![A customized reference field editor](/developers/docs/_fern-files/contentful.docs.buildwithfern.com/e56d02b06e9a445aacc009c848f83699ab2a1ab4b5e220864040ebe04ea4229a/docs/assets/images/reference-field-editor-custom.png)

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.

```javascript
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) {
        setCanAddMore(false);
      } else {
        setCanAddMore(true);
      }
    });
  });
  return (
    // Pass the parameter into the original field editor component.
    <MultipleMediaEditor
      parameters={{
        instance: { canCreateEntity: canAddMore, canLinkEntity: canAddMore },
      }}
      viewType="link"
      sdk={fieldSdk}
    />
  );
};
```

### Summary

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](https://github.com/contentful/field-editors/).