Plugins

Create Plugins for Photopea and provide them to your users through a configuration JSON.

{ "environment": {
	"plugins" : [ 
		{
			"name"  : "Wikipedia",
			"url"   : "https://en.wikipedia.org",
			"icon"  : "https://en.wikipedia.org/static/favicon/wikipedia.ico"
		}
	]
} }
  • name - plugin name
  • url - plugin URL
  • icon - plugin icon (optional)
  • w, h - plugin width, height (optional)

*** We strongly suggest not specifying "w" and "h", and make your plugin work at any size.

For each plugin, a button will be added to the right side, below the current buttons.

After the user clicks the plugin button, the panel is opened with a website url.

Users can drag-and-drop images from your website to Photopea (as Photopea supports dropping images from any website, opened by a browser).

Your website can connect with Photopea using Live Messaging (your website acts as the OE). It allows your plugin to execute scripts (e.g. to change foreground color, to move a layer, etc.).

The plugin can give files (send ArrayBuffers) to Photopea (images: psd, jpg, svg ... or resources: brushes, patterns, fonts ...), or request the current file in a specific format. All this can be controlled e.g. by buttons in your plugin (which is your website).

window.parent.postMessage("...script...", "*");
window.parent.postMessage(ArrayBuffer, "*");

Publish your Plugins

You can save your plugin as a .JSON file and upload it into a public plugin gallery. Go to Photopea.com and press Window - Plugins. Then, press "Add Plugin" at the top.

Changing your plugin or its icon in the future doesn't require going to Photopea.com, as long as the plugin and the icon remain at the same URL.

Examples of usage

Photo Store. Let users browse your database of images. They can search the database by a keyword. You can add a button "Open" next to each image, which would open that image in Photopea.

Font Gallery. Let users browse your database of fonts. The font will be loaded after clicking the button. You can integrate a payment gateway into the plugin, too (as it is your website, you have full control over it).

You can make your plugin "commercial" - let users pay for them monthly. The sign-in and the payment interface could still be in the same "iframe" of your plugin, inside Photopea (or you could open a new window and then, come back to Photopea).

Icon URL

To make an icon similar to Photopea icons, make the icon backgorund transparent, and the icon itself black. Also, add the "===" before the icon URL. Photopea will adapt the color of your icon to the current color theme (white for dark themes, dark for bright themes).

Photopea will display your icon as a multiple of 20x20 screen pixels (20x20, 40x40, 60x60, ...). So if you want sharp vertical stripes, make an icon e.g. 160x160 pixels, and a stripe 8 pixels wide. 9-pixel stripes would look blurry in such case.