Open the embedded Photopea editor from an image node, use Photopea’s full editing workspace plus Flowgen image operations, and save a durable flattened result to the graph.
Where: Flowgen → Add → Image & Vector → Photopea, then connect an image to Image.
Before you start
- Connect one image to the Photopea node’s Image input. The node has no useful empty-canvas editing state.
- Use this when you need Photopea capabilities such as pen/Bezier paths, PSD files, smart objects, text-on-path, or liquify. Use Image Editor for native layers, masks, and effects.
Key ideas
- A person edits; the node does not run: Photopea is a third-party, browser-based editor hosted in the node. It has no model call or headless execution path, so do not run it as a generation node. The last saved flattened image is emitted through image_out; before an edit, the wired source passes through.
- The source and saved result have different roles: The first connected image seeds the editor. Reopening uses the latest saved result so work continues from the prior edit. Autosave keeps the graph output current; Save to node creates a durable asset/version that downstream nodes can consume.
- AI operations are f0 tools inside the editor: With a Photopea selection active, Fill, Erase, or Restyle applies f0’s selection-aware image operation; Remove Background and Object Select are local cutout operations. Selection edits use the actual exported mask and return at the source image dimensions.
- MCP can author the graph but cannot open the editor window: MCP can create the node and connect its image source. There is no Photopea open-window tool in the Flowgen MCP API; the person opens Photopea using the node card or its selected-node sidebar action.
- Photopea card: PhotopeaNode uses the generic shared-card path. Open the third-party Photopea editor over a connected image; save its flattened image as the Flowgen node output. The node is user-operated and is not runnable/headless.
- Properties sidebar: nodeCatalogGroups.tsx
- Opened surfaces: Photopea iframe editor; selection AI operation dock; Save to node; result history
Steps
- Add Photopea from Image & Vector and connect the source image to Image.
- Select the node and choose Open Photopea. The node card also offers this action when an image is connected.
- Use Photopea’s own tools to make a change. The editor runs on photopea.com inside the Flowgen project; the app stores the flattened image returned to the node, not Photopea’s editable document/layer stack.
- For Fill, Erase, or Restyle, make a selection in Photopea, choose the operation in the f0 bar, enter a prompt when required, and choose Apply. Erase does not require prompt text.
- Use Remove BG or Object Select when you want a cutout rather than a selection-based reconstruction.
- Choose Save to node to file the current image as a durable project asset and result-history version. Downstream image nodes read this saved flattened output.
- Use Download to export the latest saved image. Use Discard edit to return to the wired source and clear saved versions.
Node contract
- Image input: image_in, one connected still.
- Image output: image_out, the latest saved flattened image or the original source before a saved edit.
- Open Photopea: opens the node-owned editor window; it is not a run action.
- Save to node: sends the flattened PNG into project storage and records a version.
- Autosave: keeps the node output durable between deliberate saves but does not add a new asset-browser version for every timer tick.
AI bar and costs
- Fill adds new content inside the selected region.
- Erase reconstructs the selected region without requiring a prompt.
- Restyle re-renders the selected region from an instruction.
- Selection Fill/Erase/Restyle use the metered image-edit route and show the plan/credit gate before spending.
- Remove Background and Object Select use local cutout models and do not use the selection-edit paid route.
Photopea document boundary
Flowgen stores the flattened result image, not a round-trippable Photopea PSD. Continue editing in the open Photopea session when you need its layer history; Save to node makes the flattened state available as a graph output.
Photopea controls and presets
- Add path: Flowgen → Add → Image & Vector → Photopea.
- Card: PhotopeaNode.
- Properties: nodeCatalogGroups.tsx.
- Controls: image_in → image_out; Photopea tools; selection Fill / Erase / Restyle; local Remove Background / Object Select; autosave; Save to node; Download / Discard.
- Opened surfaces: Photopea iframe editor; selection AI operation dock; Save to node; result history.
Tips
- Save after meaningful checkpoints. Autosave protects the current flattened output; deliberate Save to node also creates an asset-browser item and result-history entry.
- Keep the original image upstream so Discard can return to a clear source and the graph preserves provenance.
- Use the native Image Editor when editable f0 layers, masks, and effects are the goal.
Limitations and important notes
- Photopea is third-party software and is embedded with its own branding.
- The node is not runnable by Flowgen or MCP; it requires a person to use the editor window.
- This integration saves flattened image output, not the Photopea project/PSD document.
- Browser support for the embedded third-party frame varies; if it cannot load, use the photopea.com link in its toolbar.
Troubleshooting
Open Photopea is disabled.
Connect an image to Image and wait until a source or saved result appears on the card.
The editor opens without the latest saved result.
Check the node’s saved output and status. Reopening seeds from the latest node save; use Save to node after the edit completes.
Fill, Erase, and Restyle are missing.
Make a selection using a Photopea tool. The f0 operation bar appears only while a usable selection is active.
The MCP client says the editor is unavailable.
That is expected: no MCP tool opens the Photopea window. Ask the person using Flowgen to open it from the node card or selected-node sidebar.