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

# Field editors

> Understanding what is a field editor and how to use our field editor components to create a custom entry editor.

## What is a field editor?

In Contentful, content is stored as entries of a specific content type. A content type has fields of different data types such as text, json or number. You can read more about our content model [here](/concepts/data-model).

When defining a content type, each field gets a component or widget assigned. These components render that field and provide an interaction model so users can input content into that field. These components are the field editors.

The field editors are open source React components. This means developers can customize them to build entirely new entry experiences.

![A screenshot of field editors in the contentful web app](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/ae9aa7082f73644852d0ee6192bc0f84a0ea477deed7d1b885fccfd42a5cde51/docs/assets/images/field-editors.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T234818Z&X-Amz-Expires=604800&X-Amz-Signature=513522d5df35a2fcb95cb454de13baae4bbdde72f083a0f88c54c4b74eb969b3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)
(From top to bottom: A reference field editor which has an entry set, an empty reference field editor and lastly a drop-down field editor)

## When should I use a field editor?

There are two main use cases for using field editors:

* Customizing the code of a field editor.
* Composing fields in new ways through groups, conditionals or flattening.

## Examples

We've prepared one example guide:

* [Apply custom logic controlling a reference field](/extensibility/field-editors/example-customize-field-editor)

## Developer playground and documentation

Not sure where to get started? Never fear--we have created comprehensive documentation around the field editors, demonstrating how to use them in detail.

![A screenshot of field editors documentation](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/e0a2777663bd49c1e9b037654858e084822356e8b62ebfded9cdd92e6e49cdce/docs/assets/images/field-editors-docs.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T234818Z&X-Amz-Expires=604800&X-Amz-Signature=9a94ed0f8d61d7e4821d5258f8c04a434909c4bfd5c10c0f08ecae5ee04dec1b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

Visit [https://contentful-field-editors.netlify.app/](https://contentful-field-editors.netlify.app/) to see in depth documentation of how to use our field editor components.

## Additional resources

* [Source code on GitHub](https://github.com/contentful/field-editors/)
* [Developer playground & docs](https://contentful-field-editors.netlify.app/)
* [Custom markdown editor](https://github.com/contentful/field-editors/tree/master/apps/markdown-app)
* [Custom multi-references](https://github.com/contentful/field-editors/tree/master/apps/multiple-references-app)
* [Custom richtext editor](https://github.com/contentful/field-editors/tree/master/apps/rich-text-app)
* [Custom singleline editor](https://github.com/contentful/field-editors/tree/master/apps/singleline-app)
* [Custom entry editor with grouping](https://github.com/contentful/field-editors/tree/master/apps/entry-app-collapsible)