Skip to main content

Develop a UI plug-in

A UI plugin is not so different from a standard plugin or React component, it just needs some configuration and wrapping.

Having learned how to develop a standard plugin from the above documentation, and having understood React components. let's move on to a step-by-step guide to developing a ui plugin.

Development phase

  • Go to the ui/src/plugins directory and create a React component, such as Demo.

  • Create the entry file index.tsx for the Demo component.

  • Create the plugin information file info.yaml next to the entry file. Commonly used fields are as follows

# info.yaml
slug_name: ui_plugin_demo
version: 0.0.1
  • Write any React component you need in the index.tsx file and export it as follows
// plugins/index.ts
export default {
info: pluginInfo,
component: memo(Index),
  • It must be exported in this way. pluginInfo type definitions can be found in the Type Definitions section below

  • The file names must be index.tsx and info.yaml, otherwise it will affect the use of the component.

  • Export the plugins you have just defined in the plugins list file plugins/index.ts
export { default as Demo } from './Demo';
  • Now you can use the PluginRender component to render the just-defined plugin where you want it!
<PluginRender slug_name="ui_plugin_demo" />

With the above, if your plugin is functionally complete, you are ready to move on to the release phase.

Release phase

  • First, define the release registration file for the component. Using Demo as an example, we write a demo.go
// demo.go
package demo

import ""

type DemoPlugin struct {

func init() {

func (d DemoPlugin) Info() plugin.Info {
return plugin.Info{
Name: plugin.MakeTranslator(""),
SlugName: "demo_plugin",
Description: plugin.MakeTranslator("i18n.demo.description"),
Author: "answerdev",
Version: "0.0.1",

For detailed definitions, see the Extension section.

  • Then, move the entire Demo directory to the official plugins repository and submit a PR request for merging, and you've released the plugin.

I18n for plug-ins

  • Create an i18n directory under the Demo directory and add a language file in yaml format, e.g. en_US.yaml.
    • The plugin and ui fields are fixed and must be used with these two names.
    • The ui_plugin_demo section is the slug_name for the plugin, which is the value of the slug_name field defined in info.yaml.
# en_US.yaml
msg: UI Plugin Demo
  • Create index.ts in the i18n directory and initialise the language resources with the pluginKit tool.
import pluginKit from '@/utils/pluginKit';

import en_US from './en_US.yaml';
import zh_CN from './zh_CN.yaml';

  • Import the language resource file in the index.tsx file of the plugin and initialise the t function with the pluginKit. Then you can use the t function in the same way as a normal t function.
import pluginKit, { PluginInfo } from '@/utils/pluginKit';
import './i18n';

const Index: FC = () => {
const { t } = useTranslation(pluginKit.getTransNs(), {
keyPrefix: pluginKit.getTransKeyPrefix(pluginInfo),

return <div>{t('msg')}</div>;

For details, please refer to the example section

Type definitions

export type PluginType = 'Connector';

export interface PluginInfo {
slug_name: string;
type?: PluginType;
name?: string;
description?: string;

export interface Plugin {
info: PluginInfo;
component: NamedExoticComponent | FC;

interface I18nResource {
[lng: string]: {
plugin: {
[slug_name: string]: {
ui: any;


The final directory structure after the development of the Demo plugin is shown in the figure.


You can also see the Demo sample code for more information.