Working with External Libraries

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.:

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

HTML/JS with CDN library example →

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 uses Vite for bundling. Adding libraries with this template is easy. For example:

npm install react-colorful

Then import and use in your components:

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 →