Admin Panel API for plugins: An overview

Page summary:

The Admin Panel API exposes register, bootstrap, and registerTrads hooks to inject React components and translations into Strapi's UI. Menu, settings, injection zone, reducer, and hook APIs let plugins add navigation, configuration panels, or custom actions.

A Strapi plugin can interact with both the back end and the front end of a Strapi application. The Admin Panel API covers the front-end part: it allows a plugin to customize Strapi's admin panel. The admin panel is a React application, and each plugin contributes its own React application to it. Customization consists of editing an entry file to export the required interface and choosing which actions to perform.

For more information on how plugins can interact with the back end part of Strapi, see Server API.

Prerequisites

Before diving deeper into the concepts on this page, please ensure you created a Strapi plugin.

Entry file

The entry file for the Admin Panel API is [plugin-name]/admin/src/index.js. This file exports the required interface, with the following functions available:

Function type	Available functions
Lifecycle functions	register(), bootstrap()
Async function	registerTrads() (see admin localization for details)

All admin panel code can technically live in the single entry file, but splitting each concern into its own folder, as generated by the strapi generate plugin CLI command, is strongly recommended. The examples in this documentation follow that structure.

register()

Type: Function

This function is called to load the plugin, even before the app is actually bootstrapped. It takes the running Strapi application as an argument (app).

Within the register() function, a plugin can:

• register itself using registerPlugin() to make it available in the admin panel
• add a new link to the main navigation (see Admin navigation & settings)
• create a new settings section
• define injection zones
• add reducers

Example:

JavaScript

my-plugin/admin/src/index.js

import pluginId from './pluginId';

export default {
  register(app) {
    app.registerPlugin({ id: pluginId, name: 'My Plugin' });
    // Add menu links, settings sections, injection zones, and reducers here
  },
};

TypeScript

my-plugin/admin/src/index.ts

import type { StrapiApp } from '@strapi/admin/strapi-admin';
import pluginId from './pluginId';

export default {
  register(app: StrapiApp) {
    app.registerPlugin({ id: pluginId, name: 'My Plugin' });
    // Add menu links, settings sections, injection zones, and reducers here
  },
};

registerPlugin()

Type: Function

Registers the plugin to make it available in the admin panel. This function is called within the register() lifecycle function and returns an object with the following parameters:

Parameter	Type	Description
id	String	Plugin id
name	String	Plugin name
apis	Record<string, unknown>	APIs exposed to other plugins
initializer	React.ComponentType	Component for plugin initialization
injectionZones	Object	Declaration of available injection zones
isReady	Boolean	Plugin readiness status (default: true)

Note

Some parameters can be imported from the package.json file.

Example:

JavaScript

my-plugin/admin/src/index.js

export default {
  register(app) {
    app.registerPlugin({
      id: 'my-plugin',
      name: 'My Plugin',
      apis: {
        // APIs exposed to other plugins
      },
      initializer: MyInitializerComponent,
      injectionZones: {
        // Areas where other plugins can inject components
      },
      isReady: false,
    });
  },
};

TypeScript

my-plugin/admin/src/index.ts

import type { StrapiApp } from '@strapi/admin/strapi-admin';

export default {
  register(app: StrapiApp) {
    app.registerPlugin({
      id: 'my-plugin',
      name: 'My Plugin',
      apis: {
        // APIs exposed to other plugins
      },
      initializer: MyInitializerComponent,
      injectionZones: {
        // Areas where other plugins can inject components
      },
      isReady: false,
    });
  },
};

bootstrap()

Type: Function

Exposes the bootstrap function, executed after all the plugins are registered.

Within the bootstrap() function, a plugin can:

• extend another plugin using getPlugin('plugin-name'),
• register hooks (see Hooks),
• add links to a settings section,
• add actions and options to the Content Manager's List view and Edit view (see Content Manager APIs).

Example:

JavaScript

my-plugin/admin/src/index.js

export default {
  // ...
  bootstrap(app) {
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' });
  },
};

TypeScript

my-plugin/admin/src/index.ts

import type { StrapiApp } from '@strapi/admin/strapi-admin';

export default {
  // ...
  bootstrap(app: StrapiApp) {
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' });
  },
};

Available actions

The Admin Panel API provides several building blocks to customize the user interface, user experience, and behavior of the admin panel.

Use the following table to find which function to use and where to declare it. Click any function name for details:

Action	Function to use	Related lifecycle function
Add a new link to the main navigation	addMenuLink()	register()
Create a new settings section	createSettingSection()	register()
Add a single link to a settings section	addSettingsLink()	bootstrap()
Add multiple links to a settings section	addSettingsLinks()	bootstrap()
Add panels, options, and actions to the Content Manager's Edit view and List view	addEditViewSidePanel() addDocumentAction() addDocumentHeaderAction() addBulkAction()	bootstrap()
Declare an injection zone	registerPlugin()	register()
Inject a component in an injection zone	injectComponent()	bootstrap()
Add a reducer	addReducers()	register()
Create a hook	createHook()	register()
Register a hook	registerHook()	bootstrap()
Provide translations for the plugin admin interface	registerTrads()	registerTrads()

Click on any of the following cards to get more details about a specific topic:

Navigation & settings

Add menu links and configure settings sections for your plugin.

Content Manager APIs

Add panels, actions, and options to the Content Manager List and Edit views.

Injection zones

Inject React components into predefined or custom areas of the admin panel.

Redux store & reducers

Add custom reducers, read state, dispatch actions, and subscribe to changes in the Redux store.

Hooks

Create and register hooks to let other plugins add personalized behavior.

Localization

Provide translations for your plugin's admin interface using registerTrads and react-intl.

Replacing the WYSIWYG

The WYSIWYG editor can be replaced by taking advantage of custom fields, for instance using the CKEditor custom field plugin.

Info

The admin panel supports dotenv variables.

All variables defined in a .env file and prefixed by STRAPI_ADMIN_ are available while customizing the admin panel through process.env.