> 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/_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](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/fa4f2dfeae630472cc584849b5ecf796738983e154fc9bbca04d053610f73b1f/docs/assets/images/reference-field-editor-original.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260930%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260930T004152Z&X-Amz-Expires=604800&X-Amz-Signature=ac05533acc958924574ad46eb2e7e20414c19f2095a40638287e5ac97e1e2ff8&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

In contrast the same reference field editor but customized to hide
the button for creating a new entry:
![A customized reference field editor](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/e56d02b06e9a445aacc009c848f83699ab2a1ab4b5e220864040ebe04ea4229a/docs/assets/images/reference-field-editor-custom.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260930%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260930T004152Z&X-Amz-Expires=604800&X-Amz-Signature=76ec1b3b07ae27bbad4b8a42ba557768ade040c819efd91bb4e3fc5f477e61f9&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

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/).

> 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