UI extensions - Examples

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

• Showing diffs of pending changes

You can find the complete list of open source extensions in our GitHub repository.

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.

The repository needs to host a descriptor JSON file (example extension.json) with the bundle (example 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.

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:

To use the extension across several fields or content types, repeat the above steps again for each field.