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 is about the front end part, i.e. it allows a plugin to customize Strapi's admin panel.

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

General considerations

The admin panel of Strapi is a React application that can embed other React applications. These other React applications are the admin parts of each Strapi feature or plugin.

To customize the admin panel of Strapi, you can use plugins and tap into the Admin Panel API. This consists in editing an entry file to export all the required interface, and choosing which actions you want to perform.

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)

Note

The whole code for the admin panel part of your plugin could live in the /strapi-admin.js|ts or /admin/src/index.js|ts file. However, it's recommended to split the code into different folders, just like the structure created by the strapi generate plugin CLI generator command.

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 through the registerPlugin function so the plugin is 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

// Auto-generated component
import PluginIcon from './components/PluginIcon';
import pluginId from './pluginId'

export default {
  register(app) {
    app.addMenuLink({
      to: `/plugins/${pluginId}`,
      icon: PluginIcon,
      intlLabel: {
        id: `${pluginId}.plugin.name`,
        defaultMessage: 'My plugin',
      },
      Component: async () => {
        const component = await import(/* webpackChunkName: "my-plugin" */ './pages/App');

        return component;
      },
      permissions: [], // array of permissions (object), allow a user to access a plugin depending on its permissions
    });
    app.registerPlugin({
      id: pluginId,
      name,
    });
  },
};

TypeScript

my-plugin/admin/src/index.ts

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

export default {
  register(app: StrapiApp) {
    app.addMenuLink({
      to: `/plugins/${pluginId}`,
      icon: PluginIcon,
      intlLabel: {
        id: `${pluginId}.plugin.name`,
        defaultMessage: 'My plugin',
      },
      Component: async () => {
        const component = await import(/* webpackChunkName: "my-plugin" */ './pages/App');

        return component;
      },
      permissions: [], // array of permissions (object), allow a user to access a plugin depending on its permissions
    });
    app.registerPlugin({
      id: pluginId,
      name,
    });
  },
};

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, for instance:

• 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 details on the Content Manager APIs page).

Example:

JavaScript

my-plugin/admin/src/index.js

module.exports = () => {
  return {
    // ...
    bootstrap(app) {
      // execute some bootstrap code
      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) {
    // execute some bootstrap code
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' })
  },
};

Available actions

The Admin Panel API allows a plugin to take advantage of several small APIs to perform actions that will modify the user interface, user experience, or behavior of the admin panel.

Use the following table as a reference to know which API and function to use, and where to declare them, and click on any function name to learn more:

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 your plugin's admin interface	registerTrads()	(Handled in the async registerTrads() function itself)

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.