# How to Vibe Code Your Own Photopea (and Stop Paying for It)

> Online Photo Editor

- Site: https://photopea.com
- Category: Design & Graphics
- Verdict: **Impossible** (8/100 vibecodeable)
- Estimated effort: 6+ months of full-time work

## Verdict

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.

### 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

## What it 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 — Fully featured editor with sidebar ads and basic cloud storage.
- Personal Premium: $5-8/mo — Removes ads, increases storage, adds AI credits and deeper history steps.

### Funding

$0 raised.

Founded 2012.
Team size: 1.

## The hard parts

- 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 vibe code Photopea

### Prerequisites

- Node.js (free): Local development environment runtime for building the web application harness.
- Cursor (free): AI-native code editor to assist in writing canvas boilerplate and UI components.

### Recommended AI tools

- Cursor: Best suited for iterative UI work and editing the web frontend codebase.

### 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

- Cloudflare (Hosting static frontend assets on global edge network): $0/mo

### Build guide

1. **Project 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.
```

2. **HTML5 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.
```

3. **Layer 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.
```

4. **Raster 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.
```

5. **Local 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

**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 the SaaS instead: $8/mo
- Build time: 40 hours
- AI tool credits: $20
- Break-even: Never (clone lacks core rendering & parser capabilities)

## Sources

- [Photopea Official Website](https://photopea.com)
- [GetLatka - Photopea Revenue 2024](https://getlatka.com/companies/photopea)
- [Hacker News Comment by Creator Ivan Kuckir on Stack and WASM](https://news.ycombinator.com)