Porting Photoshop's C++ core to WebAssembly
Adobe's decision to bring Photoshop to the browser was made feasible largely by WebAssembly and the Emscripten toolchain. Rather than rewriting the application in JavaScript, Adobe could port its existing C++ codebase directly. Emscripten provides a translation layer that converts POSIX API calls into web APIs and maps OpenGL to WebGL, and it includes an emulated file system for applications that reference local storage. For teams interested in smaller-scale ports, the same toolchain can compile libraries such as OpenCV to the web.
Two gaps in early WebAssembly support had to be closed before Photoshop could run acceptably in a browser. The first was dynamic multithreading, which Photoshop depends on; Emscripten now supports this via pthreads. The second was C++ exception handling, which was not well supported by the original WebAssembly standard. The Chrome team worked with the W3C's WebAssembly Community Group to add exceptions to both the standard and the tooling. Photoshop also benefits from SIMD instructions: with Halide, a key component of Adobe's image-processing pipeline, SIMD delivers a 3–4× average speedup and in some cases an 80–160× speedup.
Debugging large WebAssembly modules is also critical for a project of this scale. Chrome's DevTools now includes full-featured WebAssembly debugging, with source-level stepping, breakpoints, exception pausing, variable inspection with rich type support, and basic console evaluation. A detailed guide to these capabilities is available in the Chrome team's WebAssembly debugging documentation.
Storage, color, and UI on the web platform
Photoshop documents can be large, and on desktop platforms the app dynamically maps data between disk and memory using mmap. The web equivalent came through origin private file system access handles, developed as an origin trial, which give web apps a performant way to move data in and out of memory. Adobe has also adopted the Display P3 color space for its canvas work, moving beyond the older sRGB standard to display images with brighter whites, more vivid colors, and better shadow detail on displays that support it. This work is being extended toward high dynamic range support on the HTML canvas element.
For the user interface, Adobe built on Web Components and the Lit library. Photoshop's UI elements are drawn from the Spectrum Web Components library, an implementation of Adobe's design system that is framework-agnostic. The entire app is assembled from Lit-based Web Components, which let the team cleanly integrate islands of React code from other Adobe teams thanks to the browser's built-in component model and Shadow DOM encapsulation.
Caching strategies and startup performance
Service workers act as a programmable proxy between the app and the network, and Photoshop on the web uses one to precache its JavaScript and WebAssembly bundles. This is especially effective with V8's script-caching behavior: when a service worker serves a cached WebAssembly response for the first time, Chrome generates and stores an optimized version of the code, even for multi-megabyte scripts. A similar precompilation applies to JavaScript cached during the service worker's install step, so cached scripts load with minimal runtime overhead.
Because cache-update logic and the URLs of generated scripts can be complex, Adobe automated service worker generation with Workbox, a set of libraries maintained by Google. The combination of a Workbox-based service worker and V8's script caching reduced code initialization time by an estimated 75%, though the exact figures vary by device.
Where Photoshop on the web goes next
The public beta is an initial step. Adobe plans to expand Creative Cloud to the web as a primary platform for content creation and collaboration, and the Chrome team will keep collaborating on browser capabilities. As other browsers adopt these features, Adobe expects to make its products available there as well. More about accessing the Photoshop web beta is available in the Adobe Help Center.
