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.

Examples

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.

View on GitHub

Rich text editor

This example integrates the Alloy rich text editor into text fields.

View on GitHub

Chessboard

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.

View on GitHub

Slug generator

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.

View on GitHub

Translator

This extension translates text from the default locale to other locales in a space using the Yandex translation API.

View on GitHub

JSON editor

This extension formats and validates JSON based on the CodeMirror library. You can use it with fields of type "Object".

View on GitHub

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.

View on GitHub

YouTube ID

This extension extracts the video id from a valid YouTube URL for a simple way to integrate with 3rd party media services.

View on GitHub