Creating a User Interface

Your plugin's UI runs in an iframe and can be built with React, plain HTML, or any other web framework.

• You can write your UI directly into a HTML file

• Or if you're using a framework like React, your build tool (Vite, Webpack, etc.) should compile your UI code into a single HTML file

• Lottie Creator will load this HTML file into the iframe

UI API reference

Use these methods in your plugin code to manage the UI:

creator.ui.show()

Display your plugin's UI:

creator.ui.show({
  width: 300, // Width in pixels
  height: 400, // Height in pixels
});

creator.ui.postMessage()

Send data from your plugin code to the UI:

creator.ui.postMessage({
  type: "selection-changed",
  count: creator.selection.nodes.length,
});

creator.ui.onMessage()

Receive messages from the UI in your plugin code:

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 },
    });
  }
});

For more details on how the UI communicates with your plugin code, see How Plugins Work.

Styling your UI

Since the UI runs in a standard iframe, you can style it however you prefer:

• Inline styles — Quick for simple UIs

• CSS file — Import a stylesheet in your HTML or framework

• Tailwind, CSS modules, or other CSS frameworks — Works as expected in your build setup

• Shared component library — Use @lottiefiles/creator-plugins-ui for pre-built, themed components. See the UI Library section for installation, theming, and the full component reference.