import Prerequisite from '/docs/snippets/plugins-development-create-plugin-prerequisite.md'

Admin Panel API for plugins: An overview#

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 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.

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:

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() {#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:

import pluginId from './pluginId';

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

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

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

registerPlugin() {#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:

Example:

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,
    });
  },
};

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() {#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:

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

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

export default {
  // ...
  bootstrap(app: StrapiApp) {
    // highlight-next-line
    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:

:::tip Replacing the WYSIWYG
The WYSIWYG editor can be replaced by taking advantage of custom fields, for instance using the .
:::