# Creating a User Interface
Build the user interface for your Lottie Creator Plugin.

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:

```typescript
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:

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

### `creator.ui.onMessage()`

Receive messages from the UI in your plugin code:

```typescript
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](../02_plugin-basics/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](/en/creator-plugins/ui-library) section for installation, theming, and the full component reference.