The UI Extensions SDK allows you to customize and extend the functionality of the Contentful Web App's entry editor. The editor itself is a container for components that enable editors to manipulate the content stored in content fields. Extensions can be simple user interface controls, such as a dropdown, or more complex micro web applications such as our Markdown editor. Extensions are decoupled entities from field types, and you can reuse them, for example using a dropdown to edit number or text fields. Custom extensions that you create are rendered inside a secure iframe.
We have created some example extensions to help you understand how to create your own.
Basic rating dropdown
A dropdown component to change the value of a number field and make a Content Management API request.
Rich text editor
This example integrates the Alloy rich text editor into text fields.
This extension displays a chessboard and stores the board position as a JSON object. You can drag pieces on the chessboard and the position data updates automatically. The extension also supports collaborative editing, so if two editors open the same entry, moves are synced between them.
This extension automatically generates its value from the title field of an entry. For example typing "Hello World" into the title field will set the extensions input field to "hello-world". It will also check the uniqueness of the slug across a customizable list of content types.
This extension translates text from the default locale to other locales in a space using the Yandex translation API.
This extension formats and validates JSON based on the CodeMirror library. You can use it with fields of type "Object".
JSON form editor
This extension integrates the JSON editor library to display an edit form based on a predefined JSON schema. The form input gets stored as a JSON object.
This extension extracts the video id from a valid YouTube URL for a simple way to integrate with 3rd party media services.
The extension loads videos from a project on wistia into the Contentful Web Application. A video can be previewed, selected and then stored as part of your content.