# Admin Panel API overview

> Source: https://docs.strapi.io/cms/plugins-development/admin-panel-api

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](/cms/intro). The admin panel is a [React](https://reactjs.org/) application, and each plugin contributes its own React application to it. Customization consists of editing an [entry file](#entry-file) to export the required interface and choosing which [actions](#available-actions) to perform.

For more information on how plugins can interact with the back end part of Strapi, see [Server API](/cms/plugins-development/server-api).

:::prerequisites
Before diving deeper into the concepts on this page, please ensure you [created a Strapi plugin](/cms/plugins-development/create-a-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()`](#register), [`bootstrap()`](#bootstrap) |
| Async function      | `registerTrads()` (see [admin localization](/cms/plugins-development/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() {#register}

**Type:** `Function`

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

Within the `register()` function, a plugin can:

* register itself using [`registerPlugin()`](#registerplugin) to make it available in the admin panel
* add a new link to the main navigation (see [Admin navigation & settings](/cms/plugins-development/admin-navigation-settings#navigation-sidebar-menu-links))
* [create a new settings section](/cms/plugins-development/admin-navigation-settings#creating-a-new-settings-section)
* define [injection zones](/cms/plugins-development/admin-injection-zones)
* [add reducers](/cms/plugins-development/admin-redux-store#adding-custom-reducers)

**Example:**

```js title="my-plugin/admin/src/index.js"

  register(app) {
    // highlight-next-line
    app.registerPlugin({ id: pluginId, name: 'My Plugin' });
    // Add menu links, settings sections, injection zones, and reducers here
  },
};
```
```ts title="my-plugin/admin/src/index.ts"

  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()`](#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](/cms/plugins-development/admin-injection-zones)          |
| `isReady`        | Boolean                  | Plugin readiness status (default: `true`)                                                          |

:::note
Some parameters can be imported from the `package.json` file.
:::

**Example:**

```js title="my-plugin/admin/src/index.js"

  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,
    });
  },
};
```
```ts title="my-plugin/admin/src/index.ts"

  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](#register).

Within the `bootstrap()` function, a plugin can:

* extend another plugin using `getPlugin('plugin-name')`,
* register hooks (see [Hooks](/cms/plugins-development/admin-hooks)),
* [add links to a settings section](/cms/plugins-development/admin-navigation-settings#adding-links-to-existing-settings-sections),
* add actions and options to the Content Manager's List view and Edit view (see [Content Manager APIs](/cms/plugins-development/content-manager-apis)).

**Example:**

```js title="my-plugin/admin/src/index.js"

  // ...
  bootstrap(app) {
    // highlight-next-line
    app.getPlugin('content-manager').injectComponent('editView', 'right-links', { name: 'my-compo', Component: () => 'my-compo' });
  },
};
```
```ts title="my-plugin/admin/src/index.ts"

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

| Action                                   | Function to use                                   | Related lifecycle function  |
| ---------------------------------------- | ------------------------------------------------- | --------------------------- |
| Add a new link to the main navigation    | [`addMenuLink()`](/cms/plugins-development/admin-navigation-settings#navigation-sidebar-menu-links)                      | [`register()`](#register)   |
| Create a new settings section            | [`createSettingSection()`](/cms/plugins-development/admin-navigation-settings#creating-a-new-settings-section) | [`register()`](#register)   |
| Add a single link to a settings section  | [`addSettingsLink()`](/cms/plugins-development/admin-navigation-settings#adding-links-to-existing-settings-sections)             | [`bootstrap()`](#bootstrap) |
| Add multiple links to a settings section | [`addSettingsLinks()`](/cms/plugins-development/admin-navigation-settings#adding-links-to-existing-settings-sections)           | [`bootstrap()`](#bootstrap) |
| Add panels, options, and actions to the Content Manager's Edit view and List view | <ul><li>[`addEditViewSidePanel()`](/cms/plugins-development/content-manager-apis#addeditviewsidepanel)</li><li>[`addDocumentAction()`](/cms/plugins-development/content-manager-apis#adddocumentaction)</li><li>[`addDocumentHeaderAction()`](/cms/plugins-development/content-manager-apis#adddocumentheaderaction)</li><li>[`addBulkAction()`](/cms/plugins-development/content-manager-apis#addbulkaction)</li></ul> | [`bootstrap()`](#bootstrap) |
| Declare an injection zone                | [`registerPlugin()`](#registerplugin)             | [`register()`](#register)   |
| Inject a component in an injection zone  | [`injectComponent()`](/cms/plugins-development/admin-injection-zones)           | [`bootstrap()`](#bootstrap)  |
| Add a reducer                            | [`addReducers()`](/cms/plugins-development/admin-redux-store#adding-custom-reducers)                      | [`register()`](#register)   |
| Create a hook                          | [`createHook()`](/cms/plugins-development/admin-hooks)                    | [`register()`](#register)   |
| Register a hook                          | [`registerHook()`](/cms/plugins-development/admin-hooks)                    | [`bootstrap()`](#bootstrap)   |
| Provide translations for the plugin admin interface | [`registerTrads()`](/cms/plugins-development/admin-localization#registertrads) | `registerTrads()` |
| Make authenticated HTTP requests | [`useFetchClient()`](/cms/plugins-development/admin-fetch-client) / [`getFetchClient()`](/cms/plugins-development/admin-fetch-client#outside-a-react-component) | Any |
| Access Content Manager Edit View context from React | [`unstable_useContentManagerContext`](/cms/migration/v4-to-v5/additional-resources/helper-plugin#usecmeditviewdatamanager) | Any |

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

- [Navigation & settings](/cms/plugins-development/admin-navigation-settings): Add menu links and configure settings sections for your plugin.
- [Content Manager APIs](/cms/plugins-development/content-manager-apis): Add panels, actions, and options to the Content Manager List and Edit views.
- [Injection zones](/cms/plugins-development/admin-injection-zones): Inject React components into predefined or custom areas of the admin panel.
- [Redux store & reducers](/cms/plugins-development/admin-redux-store): Add custom reducers, read state, dispatch actions, and subscribe to changes in the Redux store.
- [Hooks](/cms/plugins-development/admin-hooks): Create and register hooks to let other plugins add personalized behavior.
- [Localization](/cms/plugins-development/admin-localization): Provide translations for your plugin
- [Fetch client](/cms/plugins-development/admin-fetch-client): Make authenticated HTTP requests from the admin panel using useFetchClient and getFetchClient.

:::tip Replacing the WYSIWYG
The WYSIWYG editor can be replaced by taking advantage of [custom fields](/cms/features/custom-fields), for instance using the [CKEditor custom field plugin](https://market.strapi.io/plugins/@ckeditor-strapi-plugin-ckeditor).
:::

:::info
The admin panel supports dotenv variables in self-hosted projects.

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

This dotenv exposure does not apply to Strapi Cloud projects.
:::