Plugins

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

{ "environment": {
	"plugins" : [ 
		{
			"name"  : "Wikipedia",
			"url"   : "https://en.wikipedia.org",
			"width" : 400,
			"height": 300,
			"icon"  : "https://en.wikipedia.org/static/favicon/wikipedia.ico"
		}
	]
} }

• name - plugin name
• url - plugin URL
• width - panel width
• height - panel height
• icon - plugin icon (optional)

For each plugin, the 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, having the size of width and height.

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 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 (website).

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

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