# Working with External Libraries
Learn how to use npm packages and external libraries in your plugin.

You can use external libraries in your plugin's UI code.

Since the UI runs in an iframe, JavaScript libraries that work in the browser will work in your plugin UI.

## Using libraries with plain HTML/JS

If you're building your UI with plain HTML and JavaScript, you can include libraries with the `script` tag, e.g.:

```html
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
```

[HTML/JS with CDN library example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/external-libs-html)

## Using libraries with bundlers

Bundlers like Vite, Webpack, or Rollup let you install packages from npm and bundle them into your plugin.

Our [React template](../getting-started/create-your-first-plugin/with-react) uses Vite for bundling. Adding libraries with this template is easy. For example:

```bash
npm install react-colorful
```

Then import and use in your components:

```tsx
import { HexColorPicker } from "react-colorful";

function ColorSelector() {
  const [color, setColor] = useState("#000000");

  const handleChange = (newColor: string) => {
    setColor(newColor);
    parent.postMessage({ pluginMessage: { type: "set-color", color: newColor } }, "*");
  };

  return <HexColorPicker color={color} onChange={handleChange} />;
}
```

[React with npm package example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/external-libs-react)