> 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. # UI extensions - Locations and types > Understanding the different types of UI Extensions that are available | Comparisons | Field, entry, sidebar, dialog and page extensions > **Info** > > **Use the [App Framework](/extensibility/app-framework) for any new projects.** We recommend creating apps instead of UI extensions. [Read the app FAQ to learn why](https://www.contentful.com/help/contentful-app-framework-faq/). UI Extensions can be used to customize different parts of the web app. The following sections explain the different locations of extensions provided by Contentful, their corresponding use cases, and how to set them up. ## Comparison | Location / Type | Assignment in web app | `editor_interface` | `location` | Code example | | --------------- | -------------------------------- | ------------------ | ------------------------ | ---------------------------------- | | Field | Settings of a field | `controls` | `LOCATION_ENTRY_FIELD` | [Image Uploader][1] | | Entry | Settings of content type | `editor` | `LOCATION_ENTRY_EDITOR` | [Entry Editor Sample][2] | | Sidebar | Sidebar settings of content type | `sidebar` | `LOCATION_ENTRY_SIDEBAR` | [Rekognition - Auto tag images][3] | | Dialog | N/A | N/A | `LOCATION_DIALOG` | [Bynder][4] | | Page | N/A | N/A | `LOCATION_PAGE` | [React Router Sample][5] | [1]: https://github.com/contentful/extensions/tree/master/samples/image-uploader [2]: https://github.com/contentful/extensions/tree/master/samples/entry-editor-extension [3]: https://github.com/contentful/extensions/tree/master/samples/ai-image-tagging [4]: https://github.com/contentful/extensions/tree/master/marketplace/bynder-assets [5]: https://github.com/contentful/extensions/tree/master/samples/page-extension-react-router ## Field extensions Field extensions are the most common type of extension. They replace Contentful's built-in editorial components such as drop down or single line text field. Use cases are: * custom data input e.g. a color picker * selecting data from a 3rd party system e.g. an audience * setting default field values ![Field extensions](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/555bf7fb26837e23c1083003b3d3e239f7f7c41c53c266f783c0c4e723625aee/docs/assets/images/uiextensions-types-field.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=45756f37fb02d7e9046c53bef4daf8d21eaf7b9aff7be9dba17ab88886980c92&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) Field extensions can be assigned to a field under the appearance dialog: ![Field extensions](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/439acd0470215de4c514899ca92d1a821566060b99190a57e77833b9193786d2/docs/assets/images/uiextensions-types-field-assign.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=c00ff1e9b4eb5d876230eb629c5054b4055d62f9cb4a7df1460eb7fa24976e7c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) During runtime a field extension can detect its location via the `location` property in the [App SDK](/extensibility/app-framework/sdk#locations) which has a value of `locations.LOCATION_ENTRY_FIELD`. An example of a field extension is [Image Uploader](https://github.com/contentful/extensions/tree/master/samples/image-uploader). ## Entry extensions Entry extensions replace the fields of an entry of a given content type. They allow to fully customize the editorial experience. Examples are: * content types where all fields use a field extension * fully custom editorial UI * deep customization such as grouping fields into tabs or showing/hiding fields based on conditions. ![Entry extensions](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/e7777a0cc72ed3eeab489400cc5aa42e3575f756fbcdcc7903d4aa568a80b7f9/docs/assets/images/uiextensions-types-entry.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=4b5a9905b6e4ba8506ea9b542aa1b2e237141c477931ffe333afda122bd47c08&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) Entry extensions can be assigned to an entry under content modeling: ![Entry extensions assign](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/f17ca801b4bdcab56fc92043f9b0f386212f10e2de3726339e8cd58cb7d77331/docs/assets/images/uiextensions-types-entry-assign.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=9b072a15c99ccced8241131be773ebc96607e19543572d2369cf9060026880e4&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) During runtime an entry extension can detect its location via the `location` property in the [App SDK](/extensibility/app-framework/sdk#locations) which has a value of `locations.LOCATION_ENTRY_EDITOR`. ## Sidebar extensions Sidebar extensions are rendered in the sidebar of entries of a content type. Example use cases are: * create additional control elements for content editors such as custom publish, translation or preview functionality * open dialogs * trigger spell checking a build process or a notification ![Sidebar extensions](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/89c339524e89a283465d5438db6143cb70cea22343da7ffadda215d19e19c886/docs/assets/images/uiextensions-types-sidebar.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=b5d51305df5c00ebf178e80dd3810f0018bc222f98669d807c3ff5040c2bffe5&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) Sidebar extensions can be assigned to an entry under the sidebar tab of content modeling: ![Sidebar extensions assign](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/eca93deb2f601f0706fa90003aa38b5d177b5fc037f6abcc1482fca822d09234/docs/assets/images/uiextensions-types-sidebar-assign.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=08934ccba00a4097b58104bb0040f385b9766bd769ee431d4358160dae36e2ef&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) During runtime a sidebar extension can detect its location via the `location` property in the [App SDK](/extensibility/app-framework/sdk#locations) which has a value of `locations.LOCATION_ENTRY_SIDEBAR`. An example of a sidebar extension is [Rekognition - Auto tag images](https://github.com/contentful/extensions/tree/master/samples/ai-image-tagging). ## Dialog extensions Dialog extensions are a companion to other extensions. They are different from all other extensions as they are not assigned to a dedicated context within the web app. Instead they are opened via an API call from field, entry or sidebar extension. Example use cases are: * Integrations with 3rd party systems where a dialog is used to browse content for example in a DAM system * Interaction heavy UI where the user needs the full browser canvas ![Dialog extensions](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/e66ff76a3b12220b247d6263364cd1fdad4769c3a374b223127523d1698ef092/docs/assets/images/uiextensions-types-dialog.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=bdbcfda906761591f9bd827f0326baeaaf23840e37dd2d5988f9fbe38772c176&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) ```javascript // Opening a dialog extension: dialogs .openExtension({ id: 'mydialog', width: 500, parameters: { test: true, value: 42 }, }) .then((data) => { /* ... */ }); ``` More details can be found in the reference documentation for dialogs in the [App SDK](/extensibility/app-framework/sdk#dialogs). During runtime a sidebar extension can detect its location via the `location` property in the [App SDK](/extensibility/app-framework/sdk#locations) which has a value of `locations.LOCATION_DIALOG`. An example of a dialog extension is [Bynder](https://github.com/contentful/extensions/tree/master/marketplace/bynder-assets) ## Page extensions Page extensions can be applications within the Contentful web app. They replace everything below the main navigation, can be opened through a route, and can hook into browser navigation. Example use cases are: * Content type schema explorer application * Advanced user statistics reporting application ![Page Extensions](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/6aabf94262db5c33c91ce269fa736491af126d2aa8902e6d1267548cf91aa254/docs/assets/images/uiextensions-page-extensions.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=20260930T005005Z&X-Amz-Expires=604800&X-Amz-Signature=abb328aa421df66d482944dc1b4d0322f532e6640276f25ab66d2aa3e48af8c7&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject) ```javascript // opens a full page extension by navigating away from the current page sdk.navigator.openPageExtension({ id: 'page-extension-id' }).then(result => {...}) ``` More details can be found in the reference documentation for page extensions in the [App SDK](/extensibility/app-framework/sdk#navigator) ## Development best practices UI Extensions do not know about their type when installed into the environment of a space. Their type is defined once they get assigned to a location. It is a common practice to build multi-location UI Extensions which support views for multiple types. A UI Extension integrating with a third party DAM system could render a field view with a button to open a dialog and a dialog view which is connecting to the DAM vendor. An example of an extension which can be rendered in multiple locations can be found [here](https://github.com/contentful/extensions/tree/master/marketplace/bynder-assets) During runtime the extension can detect its location by evaluating the [location](/extensibility/app-framework/sdk#locations) property like this: ```javascript import { init, locations } from '@contentful/app-sdk'; init((api) => { if (api.location.is(locations.LOCATION_ENTRY_SIDEBAR)) { renderSidebarUI(); } if (api.location.is(locations.LOCATION_DIALOG)) { renderDialogUI(); } }); ``` ## Next steps * [Understanding the file structure](/extensibility/ui-extensions/file-structure/)