UI Extensions

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

UI Extensions allow you to customize and extend the functionality of the Contentful web app’s entry editor. Extensions can be simple user interface controls, such as a dropdown, or more complex micro applications such as our Markdown editor.

To get started with UI extensions please refer to our dedicated extensibility section.

An extension resource describes to which fields your extension can be applied and where its code can be found. The following is a list of the properties of an extension resource:

PropertyRequiredTypeDescription
nametrueStringExtension name
fieldTypesfalseArray[Object] *Field types where an extension can be used
src**StringURL where the root HTML document of the extension can be found
srcdoc**StringString representation of the extension (e.g. inline HTML code)
sidebarfalseBooleanControls the location of the extension. If true it will be rendered on the sidebar instead of replacing the field’s editing control
parametersfalseObjectDefinitions of configuration parameters

* Valid field types are:

  • {type: "Symbol"}
  • {type: "Text"}
  • {type: "RichText"}
  • {type: "Integer"}
  • {type: "Number"}
  • {type: "Date"}
  • {type: "Boolean"}
  • {type: "Location"}
  • {type: "Object"}
  • {type: "Link", linkType: "Asset"}
  • {type: "Link", linkType: "Entry"}
  • {type: "Array", items: {type: "Symbol"}}
  • {type: "Array", items: {type: "Link", linkType: "Entry"}}
  • {type: "Array", items: {type: "Link", linkType: "Asset"}}

** One of src or srcdoc has to be present:

  • Use srcdoc if you want to host the extension code in Contentful. Note that extensions hosted in Contentful have a size limit of 200KB.
  • Use src if you host the extension yourself. Note that on this case your extension must be hosted on a HTTPS domain with CORS enabled.

Extensions collection

Get all extensions of a space

Create an extension

Extension

Use this endpoint to create a new extension with a specified ID, or to update a specific extension via its ID. When updating an existing extension, you need to specify the last version of the extension you are updating with X-Contentful-Version.

Create or update an extension

Get an extension

Delete an extension