Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Edit images using Photopea right inside Visual Studio Code for free.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop or resize pictures. Edit images using Photopea right inside Visual Studio Code for free.
Features
Supported formats: psd, png, jpg, gif, svg, bmp, and webp.
Open the editor by:
opening the desired image in the file explorer (left-click)
right-clicking the desired image (or PSD/XCF file) inside the file explorer and selecting "Run Photopea editor"
running command "Run Photopea editor" in the command pallete (Ctrl+Shift+P), opens new blank Photopea document
Saving documents using VSC:
When Photopea editor is focused: Save (Ctrl+S) (works for both new and current documents) is handled by VSC, Save-as (Ctrl+Shift+S) is handled by Photopea code it self
When VSC UI is focused: Both Save (Ctrl+S) & Save-as (Ctrl+Shift+S) are handled by VSC
Example
Instalation
from VSC marketplace or using .vsix file
IDE restart may be required for the extension to work properly
Known Bugs
user can't login to Photopea account or buy premium in Account tab (caused by VSC restriction that prevents popups and redirects inside a sandboxed window)
for this reason, ad hiding is currently not possible
it is not possible to open files using "Open" (Ctrl+O) inside the Photopea window (VSC popup restriction)
when more documents are opened in a single Photopea window, "Save" (Ctrl+S) will override the original document using which was the Photopea window opened
Release Notes
v1.0.0
Initial release of Photopea extension for VSC
currently can only be run by right-clicking the desired image in the file explorer
more features will be available in upcoming releases
