The verdict: can you vibe code Photopea?
Keep paying or use the free version; vibecoding a clone of Photopea is entirely out of reach because its value is a 14-year-old custom 60fps rendering and binary parsing engine written in vanilla JS.
Photopea is a legendary solo-developer feat: a complete pixel/vector manipulation powerhouse and proprietary format parser written across 140,000+ lines of optimized JavaScript and WebGL. An AI coding agent can scaffold a basic HTML5 canvas app with rectangle drawing and color pickers, but it will completely fail to reverse-engineer the binary format specifications of Adobe Photoshop (.PSD) or build an efficient, memory-safe tile-based raster processing engine with non-destructive adjustment layers and blend modes. You cannot prompt your way around decades of graphics engineering.
Estimated effort: 6+ months of full-time work
What you can't replicate
- The massive, highly optimized vanilla JavaScript rendering core handling layers, filters, and color spaces at 60fps
- Complete, flawless parser implementations for complex proprietary binary formats like .PSD, .AI, and RAW files
- Advanced memory management strategies to prevent browser out-of-memory crashes during heavy undo/redo operations
Founded
2012
Raised
$0
Team
1
Cheapest paid tier
$0
What Photopea does
Advanced web-based raster and vector graphics editor designed as a direct alternative to Adobe Photoshop, featuring deep format compatibility, layers, masks, and local client-side processing.
Core features
- Layer stack, masks, and adjustment layers
- Raster brush engine and selection tools
- Vector shape and path editing
- Smart object management and transformation matrices
- Proprietary file format parsing (.PSD, .AI)
- Local client-side execution via WebGL / Canvas
- One-click background removal and generative fill
The business
Pricing
- Free$0
- Personal Premium$5-8/mo
Funding
$0
Pay vs build, cumulative
Break-even at month 3 — after that, every month is money kept.
The hard parts of vibe coding Photopea
- Writing a high-performance 60fps pixel manipulation and raster graphics rendering pipeline in JavaScript
- Reverse-engineering and parsing complex closed binary specifications like Adobe PSD and AI formats
- Managing massive undo/redo history trees within JavaScript garbage collection constraints without crashing the browser
- Implementing complex blending modes, color profiles (RGB, CMYK, Lab), and heavy filters natively in the browser
How to vibecode Photopea
Prerequisites
Node.jsfree
Local development environment runtime for building the web application harness.
Cursorfree
AI-native code editor to assist in writing canvas boilerplate and UI components.
Recommended stack
| Frontend | Vite + TypeScript + HTML5 Canvas |
|---|---|
| Backend | None (Client-side app) |
| Database | IndexedDB (Local browser storage) |
| Auth | None |
| Payments | None |
| Other | Tailwind CSS for tool panels |
Hosting & infrastructure
| Cloudflare | Hosting static frontend assets on global edge network | $0/mo |
Build guide
01Project Scaffolding & Layout
Initialize a Vite + TypeScript project with a Photoshop-style multi-panel workspace layout using Tailwind CSS.
Create a Vite app with TypeScript and Tailwind CSS configured. Build a desktop-grade UI layout mimicking Adobe Photoshop: a top menu bar, a left vertical toolbar with icons (move, marquee, lasso, brush, eraser, text, zoom), a central canvas workspace area with scrollable bounds, and a right sidebar containing collapsible panels for Layers, History, and Color Swatches. Ensure the layout is responsive, dark-themed, and fits within the viewport without body scrolling.02HTML5 Canvas Viewport & Zoom/Pan
Implement a high-performance HTML5 Canvas viewport supporting smooth panning, zooming, and coordinate transformation matrices.
Implement a core Canvas component in TypeScript that manages a raster graphics viewport. Support smooth zooming via mouse scroll wheel centered on the cursor position, and panning via middle-click drag or spacebar-plus-drag. Maintain an internal transformation matrix (scale, translate) so screen coordinates correctly map to image pixel coordinates. Include a grid overlay option that appears at high zoom levels.03Layer Stack & Blend Mode Engine
Build a layer management system supporting multiple raster layers, visibility toggles, opacity sliders, and basic blend modes.
Build a Layer management module and a corresponding UI panel. Each layer must contain an offscreen HTMLCanvasElement storing its pixel data, a name, visibility boolean, opacity float (0-1), and a blend mode string (normal, multiply, screen, overlay). Implement a composite rendering loop that iterates through visible layers from bottom to top, applying global alpha and composite operations onto the main viewport canvas.04Raster Brush & Drawing Tools
Implement basic raster drawing capabilities including a brush tool with configurable size, hardness, and color.
Implement a brush tool interaction handler on the active canvas layer. Support mouse down, move, and up events to draw smooth strokes by interpolating points between mouse events. Add tool settings state for brush size, opacity, and color picker selection. Modify the target layer's pixel data directly using 2D canvas context arc stamping or pixel manipulation arrays.05Local File Export & IndexedDB Persistence
Add support for saving and loading project state locally via IndexedDB and exporting canvases to standard PNG/JPEG formats.
Add file menu options to export the composite canvas as a PNG or JPEG file using canvas.toDataURL(). Implement project serialization that saves the layer stack metadata and image buffers into browser IndexedDB storage so users can reload their work later. Include a simple file open dialog to load standard raster images as a new bottom layer.
Cost vs paying for Photopea
What will you build it with?
Starting total with Cursor~$20 one-time
Starting costs (one-time)
- Cursor Pro (1 month)$20
Total~$20 one-time
Ongoing costs (monthly)
- Cloudflare Pages static hosting$0
Total$0/mo
Paying for Photopea
$8/mo
Your time to build
40 hours
AI tool credits
$20
Break-even
Never (clone lacks core rendering & parser capabilities)
Vibe code Photopea: FAQ
- Can you vibe code Photopea yourself?
- Impossible — 8/100 vibecodeable. Keep paying or use the free version; vibecoding a clone of Photopea is entirely out of reach because its value is a 14-year-old custom 60fps rendering and binary parsing engine written in vanilla JS.
- How long does it take to vibe code Photopea?
- 6+ months of full-time work — roughly 40 hours of hands-on time with an AI coding agent.
- How do you build your own Photopea?
- Scoped to personal use: Vite + TypeScript + HTML5 Canvas on the front, None (Client-side app) behind it, IndexedDB (Local browser storage) for data. Follow the 5-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Photopea without being an expert?
- Use an AI coding tool (Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 6+ months of full-time work. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Photopea instead of paying?
- About ~$20 one-time to start and $0/mo to run, versus $8/mo for Photopea. Break-even: Never (clone lacks core rendering & parser capabilities).
- What stack should you use to vibe code Photopea?
- Vite + TypeScript + HTML5 Canvas; None (Client-side app); IndexedDB (Local browser storage); plus Tailwind CSS for tool panels.