Was this page helpful?

UI extensions - Examples

Use the App Framework for any new projects.
We recommend creating apps instead of UI extensions. Read the app FAQ to learn why.

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:

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.

Overview of UI Extensions in the web app

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.

Install from GitHub

  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:

Assign UI Extensions to a field of a content type

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

Next steps

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