Create Your First Lottie Creator Plugin With HTML and JS

At its core, a Lottie Creator plugin is just three files:

manifest.json: tells Lottie Creator about your plugin
ui.html: defines your plugin user interface
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:

{
  "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:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        padding: 20px;
        background: #1e1e1e;
        color: #fff;
      }
      button {
        background: #0066ff;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
      }
      button:hover {
        background: #0052cc;
      }
    </style>
  </head>
  <body>
    <h3>My First Plugin</h3>
    <button id="create-btn">Create Rectangle</button>

    <script>
      document.getElementById("create-btn").addEventListener("click", () => {
        // Send a message to the plugin code
        parent.postMessage({ pluginMessage: { type: "create-rectangle" } }, "*");
      });
    </script>
  </body>
</html>

Step 4: Create your plugin logic

Create the file plugin.js. This is where your plugin logic interacts with Lottie Creator:

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

Open Lottie Creator
Open the Plugins panel from the left sidebar and click the + button
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:

The UI sends a message via parent.postMessage()
Your plugin code receives it via creator.ui.onMessage()
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 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 →