How Adobe Brings Photoshop to the Browser: WebAssembly, Web Components, Service Workers, and AI Integration

Adobe has launched a web version of Photoshop (photoshop.adobe.com) that showcases the feasibility of running a highly complex, graphics‑intensive application directly in the browser using modern web platform capabilities.

Vision: Photoshop in the Browser

The goal is to make Photoshop universally accessible without installation, providing a frictionless editing experience across devices and enabling URL‑based document sharing for collaborative workflows.

New Web Capabilities Used

OPFS for High‑Performance Local File Access

Large PSD files require fast local file system access; the Origin Private File System (OPFS) API offers a secure, high‑speed virtual file system.

const opfsRoot = await navigator.storage.getDirectory();

Typical file operations are demonstrated below:

// Create file
const file = await opfsRoot.getFileHandle('image.psd', { create: true });
// Get read/write handle
const handle = await file.createSyncAccessHandle();
// Write data
handle.write(buffer);
// Read data
handle.read(buffer);
// Delete file
await file.remove();

Using FileSystemSyncAccessHandle enables ultra‑fast synchronous file operations.

WebAssembly Power

WebAssembly, compiled from Adobe’s existing C/C++ code via Emscripten, provides the performance core for pixel‑intensive processing. Key WASM features used include SIMD for vectorized pixel operations, exception handling, streaming compilation for large modules (>80 MB), debugging support in Chrome DevTools, and multi‑threading via Web Workers.

// Thread function example
void* tileProcessor(void* data) {
    // Process image tile data
    return NULL;
}
// Start worker threads
pthread_t thread1, thread2;
pthread_create(&thread1, NULL, tileProcessor, NULL);
pthread_create(&thread2, NULL, tileProcessor, NULL);
// Wait for completion
pthread_join(thread1, NULL);
pthread_join(thread2, NULL);

P3 Wide‑Gamut Color

Photoshop leverages the new color() function and Canvas API to render colors in the Display‑P3 gamut, delivering richer, more accurate color reproduction than traditional sRGB.

color: color(display-p3 1 0.5 0);

Web Components with Lit

Adobe builds the UI using Lit‑based Web Components, ensuring a lightweight, framework‑agnostic, and accessible component library (Spectrum) that can interoperate with other frameworks like React.

Performance Optimizations for the Browser

Service Workers and Workbox Caching

Service Workers cache WebAssembly modules, scripts, and assets, dramatically reducing load times. Adobe uses the Workbox library to integrate caching into the build pipeline.

Streaming Compilation and Caching of Large WASM Modules

V8’s streaming compilation handles massive WASM binaries efficiently, and cached compiled versions are reused on subsequent loads.

Multithreaded Graphics Processing

WebAssembly threads enable parallel execution of compute‑heavy image operations, matching desktop‑class performance.

WebAssembly Debugging

Chrome DevTools provides full debugging capabilities for WASM, allowing breakpoints, variable inspection, and performance profiling.

On‑Device AI with TensorFlow.js

Photoshop integrates TensorFlow.js to run AI models locally, improving privacy, latency, and cost. The “Select Subject” feature uses a model converted from TensorFlow to TensorFlow.js.

// Load the selection model
const model = await tf.loadGraphModel('select_subject.json');
// Run inference on an image tensor
const { mask, background } = model.execute(imgTensor);

Collaboration between Adobe and Google produced proxy APIs for seamless interaction between Emscripten‑generated WASM code and TensorFlow.js.

Future Directions

Photoshop’s web presence is a milestone, with plans to extend the entire Creative Cloud suite to the browser, leveraging ongoing browser standards evolution and performance improvements.