> 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](/developers/docs/_fern-img/ec7042e75cf8cf174d08bb294618af35e362e4d930052a4971e8fec8d5814394.webp)

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](/developers/docs/_fern-files/contentful.docs.buildwithfern.com/c4c6cdb9866f74e04c0331a4dc054962dbf04866d3e59bfc401e369d65ed442c/docs/assets/images/install-github.png)

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](/developers/docs/_fern-img/c938b6cfe3344bc41fe49fab48ae3903594a467d2abcf09eb6614fd78ba7f30c.webp)

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