Was this page helpful?

UI Extensions

What are UI Extensions?

UI Extensions allow 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

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 select Shopify products.

figure

UI Extensions are (essentially) a small HTML5 application that exist in a sandboxed <iframe> and interact with the Contentful Web App through the UI Extensions 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 UI Extensions 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.

Conceptually, UI Extensions are categorized as:

  • 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

Not what you’re looking for? Try our FAQ.