Design Photoshop on the Web – Frontend System Design

We’ll walk through the frontend system design for Photoshop on the web: a raster image editor that opens a 200 MB layered file in a browser tab, paints with a pressure-sensitive brush at display refresh rate, and runs a Gaussian blur across eight CPU cores. You’ll see why the engine is C++ compiled to WebAssembly, how threads share one block of memory, why every layer is a grid of 256 × 256 tiles, and where the pixels go when RAM runs out.

This is not the Figma question. Figma is a vector scene graph with multiplayer. Photoshop is pixels: hundreds of megabytes of them per layer, filters that touch every one, and an interviewer who wants you to go deep on “building it in WebAssembly”. The hard parts are memory, threads, and the JS-to-Wasm boundary.

Problem Statement

Design the frontend for a professional raster image editor that runs in the browser, like Photoshop on the web.

Requirements:

• Open and save layered documents up to 8000 ×... premium content.