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

> Examples of existing UI Extensions | Installing an example into your space | Assigning UI Extensions to a field

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

Contentful provides a curated list of examples that can be installed into spaces. All examples are open source so they can be customized to specific needs. Some of the highlights are:

* [Directly uploading images](https://github.com/contentful/extensions/tree/master/samples/image-uploader)
  ![Image uploader UI Extension](https://raw.githubusercontent.com/contentful/extensions/master/samples/image-uploader/gifcast.gif)

* [Showing diffs of pending changes](https://github.com/contentful/extensions/tree/master/samples/diff/)
  ![Diff UI Extension](https://github.com/contentful/extensions/raw/master/docs/assets/diff-extension.png)

You can find the complete list of open source extensions in our [GitHub repository](https://github.com/contentful/extensions/tree/master/samples).

## Installing an example into your space

The quickest way to install an example into a space is by using the web app's **Install from GitHub** flow.

![Overview of UI Extensions in the web app](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/ec7042e75cf8cf174d08bb294618af35e362e4d930052a4971e8fec8d5814394/docs/assets/images/uiextensions-extensions-view.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=20260930T000919Z&X-Amz-Expires=604800&X-Amz-Signature=c0a7014936d16ca8c2d16b0b86dfe3d37dd0ac1b2a25c136de7f1fe6e64fd67a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

The repository needs to host a descriptor `JSON` file (example [extension.json](https://github.com/contentful/extensions/blob/master/samples/diff/extension.json)) with the bundle (example [index.html](https://github.com/contentful/extensions/blob/master/samples/diff/index.html)) of the extension correctly referenced from the descriptor file.

To install from a source on GitHub, follow these steps:

1. Select **Install from GitHub** from the **Add extension** drop down.

2. Enter a public GitHub link to an `extension.json` descriptor file or select one from the **contentful/extensions** repository.

![Install from GitHub](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/c4c6cdb9866f74e04c0331a4dc054962dbf04866d3e59bfc401e369d65ed442c/docs/assets/images/install-github.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=20260930T000919Z&X-Amz-Expires=604800&X-Amz-Signature=4ead0c820ebf0c1c5ca295f39b7e09b5b3e86406db34d3edfd728e458f903c28&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

1. Click **Install** to complete the installation.

## Assigning UI Extensions to a Field

After a successful installation, UI Extensions can be assigned to a field of a content type.

To assign UI Extensions to a field:

1. Navigate to a Content Type.

2. Select a field in the Content Type.

3. Navigate to **Settings> Appearance** of the field.

4. Select the desired UI Extension.

5. Navigate to an entry of the Content Type to see the selected UI Extension in action.

The image below shows the *Appearance* tab under *Setting* of a field:

![Assign UI Extensions to a field of a content type](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/c938b6cfe3344bc41fe49fab48ae3903594a467d2abcf09eb6614fd78ba7f30c/docs/assets/images/uiextensions-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=20260930T000919Z&X-Amz-Expires=604800&X-Amz-Signature=e0317a72fbd2f1e00d7841551ca88ce4810d8924dc7c078a5c0766891ddde841&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

To use the extension across several fields or content types, repeat the above steps again for each field.

## Next steps

* [Locations and Types.](/extensibility/ui-extensions/locations/)