Embed Photopea Image Editor in Web Apps with JavaScript

photopea-embedded-editor teaches an agent to embed Photopea - a browser-based, Photoshop-compatible image editor - inside a web page or app using photopea.js, a Promises-based JavaScript wrapper around Photopea's Live Messaging API (repository yikuansun/PhotopeaAPI, npm package photopea). The skill's Photopea class exposes five core operations: Photopea.createEmbed(container) to create and inject the editor iframe, pea.runScript(script) to run a JavaScript string inside the embedded document and get back an array of values plus a final "done", pea.loadAsset(arrayBuffer) to load a binary file such as an image, font, or brush, pea.openFromURL(url, asSmart) to open a remote file as a new document or as a smart-object layer, and pea.exportImage(type) to export the current document as a PNG or JPEG Blob (other formats such as WebP, PSD, or SVG go through runScript("...saveToOE(...)...") instead). A new Photopea(window.parent) plugin mode wraps the parent window when the skill's own page runs inside Photopea's sidebar. Inside runScript, the Adobe Photoshop CC 2015 JavaScript scripting interface is available - documents, layers (ArtLayer/LayerSet), text (TextItem), selections, colors (SolidColor), filters (blur, sharpen, noise, distort, render, stylize), and executeAction for lower-level operations Photopea does not otherwise expose as a method.

Use it for every task that involves embedding Photopea as an image editor inside a webpage or app, controlling an embedded instance from JavaScript, automating an image-editing workflow from the host page (open files, run scripts, export results), building an image-editing feature on top of Photopea as the engine, or writing scripts that manipulate documents, layers, text, selections, filters, colors, or paths. Do NOT wire raw postMessage calls directly to the Photopea iframe - always go through photopea.js as the wrapper.

Input is a container element with a fixed width and height (required before createEmbed will resolve), plus the files or scripts to run against it: a remote URL, a local file read into an ArrayBuffer, or a base64 data URI opened via runScript. Output depends on the call: runScript returns an array of app.echoToOE(...) values with "done" appended last; exportImage("png"|"jpg") returns a Blob; other export formats come back the same way via saveToOE format strings ("jpg:0.8", "webp:0.7", "psd", "psd:true", "svg:true"). All photopea.js methods return Promises.

Ships as a CDN script (photopea@1.1.1 via jsdelivr), a self-hosted script tag, or an npm package (npm install photopea, import Photopea from "photopea") for Webpack/Vite/Rollup projects, and documents a React pattern using useRef/useEffect. It is the client-side counterpart to Photopea itself and its Live Messaging API, and the in-runScript surface tracks the Photoshop CC 2015 JavaScript scripting reference, so existing Photoshop scripts targeting that version are expected to run largely unchanged. Community skill, MIT-licensed, source repository yikuansun/PhotopeaAPI.

Frontend and product developers building an in-browser image-editing feature - template generators, watermarking tools, batch export pipelines, or a full editor UI - on top of Photopea instead of building layer and canvas editing from scratch.