photopea-embedded-editor
Embed Photopea in web apps using photopea.js. Covers embedding, file I/O, scripting, exporting, layers, text, filters, and the full Photoshop-compatible API.
Profile →npx skills add sickn33/agentic-awesome-skills --skill photopea-embedded-editor --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Embeds Photopea in web apps using photopea.js. Provides a Promise-based wrapper around the Photopea Live Messaging API to create an embedded editor, open files (URL or local assets), run Photopea scripts, and export images in PNG/JPG/WebP/PSD/SVG formats. It includes a Plugin mode and utility patterns for common tasks like adding images, editing text, and batch watermarking.
How it works
- Use Photopea.createEmbed(container) to inject the editor iframe into a fixed-size container; it resolves to a pea object when ready.
- Open files via pea.openFromURL(url, asSmart) to load as a new document or as a smart object layer; loadAsset(arrayBuffer) to bring in local assets; runScript(script) to execute Photoshop-like scripts inside Photopea and get an array of outputs; exportImage(type) to obtain a Blob in PNG or JPEG formats.
- Step-by-step usage includes embedding, opening files, running scripts, exporting, loading assets, and optional Plugin mode using new Photopea(window.parent).
- The API returns Promises for all methods; callers should await or chain with .then().
When to use it
Use this skill for embedding Photopea as an image editor inside a webpage or web app, controlling an embedded Photopea instance from JavaScript, automating image editing workflows (open files, run scripts, export results), and building an image editing feature with Photopea as the engine.
What it can touch
- Exposed API surface includes the Photopea class and its methods (createEmbed, openFromURL, loadAsset, runScript, exportImage, etc.).
- The implementation assumes access to a container DOM element and assets via fetch/arrayBuffer, as demonstrated in code samples.
Caveats
- All examples rely on the photopea.js library and the Photopea scripting interface; behavior is constrained to Photopea capabilities (e.g., app.activeDocument, saveToOE, exportImage).
- The skill documents plugin usage and various export formats, but notes that integration details (server config for save) may vary by deployment.
# Photopea Embedded Editor Skill ## Using photopea.js (yikuansun/PhotopeaAPI) in Websites & Apps --- ## When to Use This Skill Use this skill for **every task** that involves: - Embedding Photopea as an image editor inside a webpage or web app - Controlling an embedded Photopea instance from your JavaScript code - Automating image editing workflows from a host page (open files, run scripts, export results) - Building an image editing feature into your product using Photopea as the engine - Writing scripts to manipulate documents, layers, text, selections, filters, colors, and paths **Do NOT** use raw `postMessage` wiring — always use `photopea.js` as the wrapper. --- ## Library: photopea.js `photopea.js` is a Promises-based JavaScript wrapper around the Photopea Live Messaging API. Repository: https://github.com/yikuansun/PhotopeaAPI npm package: https://www.npmjs.com/package/photopea ### Installation **CDN (no build step)** ```html <script src="https://cdn.jsdelivr.net/npm/photopea@1.1.1/dist/photopea.min.js"></script> ``` **Self-hosted** ```html <script src="./photopea.min.js"></script> ``` **npm (Webpack / Vite / Rollup)** ```bash npm install photopea ``` ```js import Photopea f
- Using photopea.js (yikuansun/PhotopeaAPI) in Websites & Apps
- When to Use This Skill
- Library: photopea.js
- Installation
- Core API: The Photopea Class
- Step 1 — Embed
- Step 2 — Opening Files
- Step 3 — Running Scripts
- Step 4 — Exporting
- Step 5 — Loading Assets
- Step 6 — Plugin Mode
- Utility Patterns
- addImageAndWait — robust async layer insertion
- getDocumentAsImage — returns <img> element
npm install photopea
What does the photopea-embedded-editor skill do?
Embed Photopea in web apps using photopea.js. Covers embedding, file I/O, scripting, exporting, layers, text, filters, and the full Photoshop-compatible API.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill photopea-embedded-editor --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.