Skip to main content

injection-zones-vs-content-manager-apis

tl;dr

For adding panels, actions, or buttons to the Content Manager, the Content Manager APIs (addDocumentAction, addEditViewSidePanel, etc.) are often more robust and better typed than injection zones. Use injection zones when you need to insert components into specific UI areas not covered by the Content Manager APIs.

Content Manager APIs and injection zones are both extension points to customize the admin panel, but they solve different needs:

NeedRecommended APIWhy
Add a custom panel in the Edit View side areaContent Manager API (addEditViewSidePanel)Best for contextual information or controls that stay visible while editing.
Add actions in a document action menuContent Manager API (addDocumentAction)Best for document-level actions in the Edit View actions menu.
Add actions in the Edit View headerContent Manager API (addDocumentHeaderAction)Best for quick, prominent actions next to the document title.
Add actions for selected entries in List ViewContent Manager API (addBulkAction)Best for workflows that apply to multiple entries at once.
Add UI to a predefined zone in a plugin view (localized visual customization)Injection Zones API (injectComponent)Best when you target a specific zone exposed by a plugin.

For implementation details and up-to-date API signatures, please refer to the content-manager file in the Strapi codebase.

Mini examples (inside bootstrap(app))

// Document action menu item
app.getPlugin('content-manager').apis.addDocumentAction(() => ({
label: 'Run custom action',
onClick: ({ documentId }) => runCustomAction(documentId),
}));

// Edit View header action
app.getPlugin('content-manager').apis.addDocumentHeaderAction(() => ({
label: 'Open preview',
onClick: ({ document }) => openPreview(document),
}));

// List View bulk action
app.getPlugin('content-manager').apis.addBulkAction(() => ({
label: 'Bulk publish',
onClick: ({ documentIds }) => bulkPublish(documentIds),
}));

// Edit View side panel
app.getPlugin('content-manager').apis.addEditViewSidePanel([
{
name: 'my-plugin.side-panel',
Component: MySidePanel,
},
]);

// Injection zone (plugin-defined zone)
app.getPlugin('content-manager').injectComponent('editView', 'right-links', {
name: 'my-plugin.custom-link',
Component: MyCustomLink,
});