> This page is for Extensibility.

> 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

> Contentful UI Extensions enable developers to customize websites and apps. Learn how UI Extensions make website and content management easier than ever.

> **Info**
>
> **Use the [App Framework](/developers/docs/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/).

## What are UI Extensions?

A UI Extension allows developers to extend the basic functionality of the Contentful web app.

They can be used to update an existing field, like creating a different interface for editing JSON fields,
![json-form-editor](https://contentful.github.io/extensions/assets/json-form-editor.png)

or building something completely new, like integrating third-party data in Contentful. For example, adding a custom field to Contentful that allows users to search and [get extensions for Shopify products](https://github.com/contentful/apps/tree/master/apps/shopify).

![figure](https://contentful.github.io/extensions/assets/Shopify-Product-Demo.gif "Contentful Shopify Product UI Extension demo")

A UI Extension is (essentially) a small HTML5 application that exists in a sandboxed `<iframe>` and interacts with the Contentful web app through the [App SDK](/developers/docs/extensibility/app-framework/sdk). This SDK is a proxy to the Content Management API and acts on behalf of the logged on user. The UI Extensions code is completely customizable and can be either uploaded to Contentful or self-hosted.

The implementation of a UI Extension is completely based on the use case. It can be implemented from basic HTML and JavaScript to advanced apps based on frameworks such as React, Angular or Vue.

## [Types of Extensions](/developers/docs/extensibility/ui-extensions/locations)

* **Single field extensions** that reside in the entry editor body and operate on top of a particular field or set of fields.

* **Sidebar extensions** that reside on the sidebar of the entry editor and make it possible to apply the functionality provided by the extension to an entire entry instead of a single field.

## Next steps

* [Use cases to understand how UI Extensions can be used to extend the Contentful UI.](/developers/docs/extensibility/ui-extensions/use-cases)