---
title: Overview of dynamic plugins
---

# Overview of dynamic plugins {#overview-dynamic-plugin}

Dynamic plugins are loaded and interpreted from remote sources at runtime. One way to deliver and expose dynamic plugins to the console is through OLM Operators. The Operator creates a deployment on the platform with an HTTP server to host the plugin and exposes it using a Kubernetes service.

Dynamic plugins allow you to add custom pages and other extensions to your console user interface at runtime. The `ConsolePlugin` custom resource registers plugins with the console, and a cluster administrator enables plugins in the console Operator configuration.

## Key features {#dynamic-plugins-features}

A dynamic plugin allows you to make the following customizations to the OpenShift Container Platform experience:

- Add custom pages.
- Add perspectives beyond administrator and developer.
- Add navigation items.
- Add tabs and actions to resource pages.

## General guidelines {#general-plug-in-guidelines}

When creating your plugin, follow these general guidelines:

- `Node.js` is required to build and run your plugin. You can use any package manager, such as npm or yarn. For download links, see Additional resources.
- Prefix your CSS class names with your plugin name to avoid collisions. For example, `my-plugin_\_heading` and `my-plugin_\_icon`.
- Maintain a consistent look, feel, and behavior with other console pages.
- Follow the react-i18next localization guidelines, linked in Additional resources, when creating your plugin. You can use the `useTranslation` hook such as the one in the following example:

  ```tsx
  const Header: React.FC = () => {
    const { t } = useTranslation('plugin__console-demo-plugin');
    return <h1>{t('Hello, World!')}</h1>;
  };
  ```
- Avoid selectors that could affect markup outside of your plugin’s components, such as element selectors. These are not APIs and are subject to change. Using them might break your plugin.
- Provide valid JavaScript Multipurpose Internet Mail Extension (MIME) type using the `Content-Type` response header for all assets served by your plugin web server. Each plugin deployment should include a web server that hosts the generated assets of the given plugin.
- You must build your plugin with Webpack using Webpack version 5 and later.

## PatternFly guidelines {#_patternfly_guidelines}

When creating your plugin, follow these guidelines for using PatternFly:

- Use PatternFly components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables helps your plugin look consistent in future console versions. For a list of available components, see Additional resources.

  - Use PatternFly 4.x if you are using OpenShift Container Platform versions 4.14 and earlier.
  - Use PatternFly 5.x if you are using OpenShift Container Platform versions 4.15 through 4.18.
  - Use PatternFly 6.x if you are using OpenShift Container Platform versions 4.19 and later.
- Make your plugin accessible by following PatternFly’s accessibility fundamentals, linked in Additional resources.
- Avoid using other CSS libraries such as Bootstrap or Tailwind. They might conflict with PatternFly and not match the rest of the console. Plugins should only include styles that are specific to their user interfaces to be evaluated on top of base PatternFly styles. Do not import styles directly from `@patternfly/react-styles/**/*.css` or `@patternfly/patternfly`. Instead, use components and CSS variables provided by the console SDK.
- The console application is responsible for loading base styles for all supported PatternFly versions.

### Translating messages with react-i18next {#dynamic-plugin-api_overview-dynamic-plugin}

The `console-plugin-template` plugin template demonstrates how you can translate messages with react-i18next.

**Prerequisites**

- You must have the plugin template cloned locally.
- Optional: To test your plugin locally, run the OpenShift Container Platform web console in a container. You can use either Docker or Podman 3.2.0 or later.

**Procedure**

1. Prefix the name with `plugin\__` to avoid any naming conflicts. The plugin template uses the `plugin__console-plugin-template` namespace by default, and you must update when you rename your plugin for example, `plugin__my-plugin`.  You can use the `useTranslation` hook, for example:

   ```tsx
   conster Header: React.FC = () => {
     const { t } = useTranslation('plugin__console-demo-plugin');
     return <h1>{t('Hello, World!')}</h1>;
   };
   ```

   > [!IMPORTANT]
   > You must match the `i18n` namespace with the name of the `ConsolePlugin` resource.
2. Set the `spec.i18n.loadType` field based on needed behavior.

   `plugin__console-demo-plugin` **Example**

   ```yaml
   spec:
     backend:
       service:
         basePath: /
         name: console-demo-plugin
         namespace: console-demo-plugin
         port: 9001
       type: Service
     displayName: OpenShift Console Demo Plugin
     i18n:
       loadType: Preload
   ```

   `loadType: Preload`
   :   Loads all the plugin’s localization resources from the `i18n` namespace after the dynamic plugin during loading.
3. Use the format `+%plugin__console-plugin-template~My Label%+` for labels in `console-extensions.json`. The console replaces the value with the message for the current language from the `plugin__console-plugin-template` namespace. For example:

   ```json
     {
       "type": "console.navigation/section",
       "properties": {
         "id": "admin-demo-section",
         "perspective": "admin",
         "name": "%plugin__console-plugin-template~Plugin Template%"
       }
     }
   ```
4. Include a comment in a TypeScript file for the `i18next-parser` tool to add the message from `console-extensions.json` to your message catalog. For example:

   ```tsx
   // t('plugin__console-demo-plugin~Demo Plugin')
   ```
5. To update the JSON files in the `locales` folder of the plugin template when adding or changing a message, run the following command:

   ```terminal
   $ yarn i18n
   ```

**Additional resources**
{._additional-resources}

- [react-i18next](https://www.i18next.com/)

**Additional resources**
{._additional-resources}

- [Node.js](https://nodejs.org/en/)
- [yarn](https://yarnpkg.com/)
- [react-i18next localization guidelines](https://www.i18next.com/)
- [PatternFly components](https://www.patternfly.org/components/all-components/)
- [PatternFly’s accessibility fundamentals](https://www.patternfly.org/accessibility/accessibility-fundamentals/)