# Create Your First Lottie Creator Plugin With HTML and JS
Build your first Lottie Creator Plugin with plain HTML and JavaScript.
At its core, a Lottie Creator plugin is just three files:
1. **manifest.json**: tells Lottie Creator about your plugin
2. **ui.html**: defines your plugin user interface
3. **plugin.js**: defines your plugin logic
Here's how to set up the most minimal version of a Lottie Creator plugin:
## Step 1: Create your plugin folder
Create a new folder for your plugin. This is what the folder will look like by the end of this tutorial:
```
my-first-plugin/
├── manifest.json
├── plugin.js
└── ui.html
```
## Step 2: Create your manifest
Create the file `manifest.json`. This tells Lottie Creator about your plugin:
```json
{
"id": "fc2a4ea8-1749-4836-ab70-0c0aee5e8773",
"name": "My First Plugin",
"apiVersion": "1",
"entry": "plugin.js",
"ui": "ui.html"
}
```
## Step 3: Create your UI
Create the file `ui.html`. This is the interface users interact with:
```html
My First Plugin
```
## Step 4: Create your plugin logic
Create the file `plugin.js`. This is where your plugin logic interacts with Lottie Creator:
```javascript
// Show the plugin UI
creator.ui.show({ width: 300, height: 200 });
// Listen for messages from the UI
creator.ui.onMessage((msg) => {
if (msg.type === "create-rectangle") {
const layer = creator.activeScene.createShapeLayer();
layer.createRectangle();
const fill = layer.createFill({
type: "SOLID",
color: { r: 0, g: 255, b: 0 },
});
}
});
```
## Step 5: Load in Lottie Creator
1. Open Lottie Creator
2. Open the **Plugins** panel from the left sidebar and click the **+** button
3. On the **Develop** tab, you have two ways to load your plugin:
- **From a local server:** enter your local URL under **Development URL** and click **Continue**; OR
- **From a ZIP:** choose **Or upload a Plugin ZIP file** and select a ZIP of your folder's contents.
## What's happening
When you click the button in your UI:
1. The UI sends a message via `parent.postMessage()`
2. Your plugin code receives it via `creator.ui.onMessage()`
3. The plugin uses the `creator` API to create a shape in the scene
This message-passing pattern is how all plugins work — the UI and plugin code are separate for security, but they communicate freely through messages.
## Next steps
This is the most minimal version of a Lottie Creator plugin — but you can build much more complex user interfaces and workflows. Use any framework, build tool, or process you like (React, Vue, Svelte, Webpack, etc.) as long as the final output is HTML and JavaScript.
To make development easier, we provide a **[React starter template](/en/creator-plugins/01_getting-started/create-your-first-plugin/with-react)** with:
- Hot reloading for instant feedback
- Preconfigured local server
- TypeScript for type safety and autocomplete
- Vite for managing plugin builds
## Example
[Basic plugin (HTML) example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/basic-plugin-html)