# Develop UI components for Apps

With Lowcoder plugins, you can develop customized components that are consistent with native components for your specific scenarios.

## Initialization

Execute the following `yarn start` file:

```bash
# Project initiation
yarn create lowcoder-plugin my-plugin

# Go to the project root
cd my-plugin

# Start the development environment
yarn start
```

## Component development environment

After executing `yarn start`, the browser is automatically opened and you enter the component development environment.

## Plugin configurations

In `Lowcoder` field in `package.json` file, you need to define the component properties. For example, the following is the explanation of several fields:

* `comps` defines UI components contained in the plugin. For each component, the key name of the object is the unique identity, and the value is metadata.
* `comps[someCompKey].name` defines the component name shown in the **Insert** tab.
* `comps[someCompKey].icon` defines the component icon shown on the canvas. Use a relative path to where `package.json` file is located.
* `comps[someCompKey].layoutInfo` defines the component layout:
  * w: width of the component. Counted by the number of grid cells (range: 1 - 24).
  * h: height of the component. Counted by the number of grid cells (range: >= 1).

```bash
  "Lowcoder": {
    "description": "",
    "comps": {
      "hello_world": {
        "name": "Hello World",
        "icon": "./icons/hello_world.png",
        "layoutInfo": {
          "w": 12,
          "h": 5
        }
      },
      "counter": {
        "name": "Counter",
        "icon": "./icons/hello_world.png"
      }
    }
  }
```

## Export components

To export all the components, use `src/index.ts`, for example:

```bash
import HelloWorldComp from "./HelloWorldComp";

export default {
  hello_world: HelloWorldComp,
};
```

The default exported object `key` needs to be consistent with the `key` configured in `comps` in `package.json` file.

## Publish plugins

When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command:

```
yarn build --publish
```

If you do not specify the parameter `--publish`, the `tar` file will be saved in the root folder.

## Import plugins

In the Lowcoder app, click **Insert** > **Extensions** > **Add npm plugin** in the right pane. 

Input your npm package's URL or name, and then you can use your customized components.

```bash
my-plugin

# or

https://www.npmjs.com/package/my-plugin
```

## Code demo

For code demo, refer to Lowcoder Github.