WebAssembly in Adobe Photoshop UXP plugins
Introduction: What is WebAssembly and Why Does It Matter?
WebAssembly (often shortened to WASM) is a low-level binary format that runs in modern web browsers. Because you can compile C++ (and many other languages) to this format, you get near-native performance while maintaining portability and security. This powerful combination allows developers to bring computationally heavy tasks — like image or video processing — directly into the browser or other JavaScript environments, significantly broadening what’s possible on the web and beyond.
Embracing WASM Early On
As a long-time WebAssembly enthusiast, I’ve been harnessing its potential ever since it was first introduced. One of my early projects involved creating an XMP LUTs Converter and raw-debayering software that ran seamlessly in the browser. That experience taught me just how transformative WASM could be for performance-intensive tasks. In this article, I’ll show how these same benefits can extend into another exciting use case: building Photoshop plugins with WebAssembly.
Why WebAssembly for Photoshop Plugins?
Photoshop plugins have traditionally required native C++ code that must be compiled separately for macOS (Intel and Arm) and Windows. This “UXP Hybrid Plugin” approach, while powerful, can become cumbersome because each build must accommodate multiple platforms, Photoshop C++ APIs, and specific code for image buffers and manipulations.
In contrast, WebAssembly is platform-agnostic. By compiling an image processing library to WASM via Emscripten, you can run the same code in a web browser, on mobile (iOS, Android), and on desktop operating systems (macOS, Windows, Linux) using runtimes like Wasmtime. This “write once, run anywhere” advantage is one of WASM’s most compelling features.
Introducing the “UXP WASM Plugin” Concept
My alternative approach — informally calling it a “UXP WASM Plugin” — involves creating an image manipulation library in C++ and compiling it to WebAssembly. Once compiled, the plugin can be dropped into different environments, including Photoshop, without needing separate builds per platform. At its core, the only requirement is to load a buffer into the plugin’s WASM memory and retrieve the processed output.
The WasmUXP Example
To illustrate this approach, I created WasmUXP. This project demonstrates how to integrate a WebAssembly module into an Adobe Photoshop UXP plugin. Because of Photoshop’s strict Content Security Policies (CSP), Emscripten-compiled code sometimes fails at runtime, displaying errors like “Code generation from strings disallowed for this context.” WasmUXP addresses these hurdles by configuring the compiled JavaScript ahead of time (AOT), thereby disabling dynamic code generation and preventing these CSP conflicts.
Although WebAssembly isn’t officially supported in Photoshop’s UXP framework, the WasmUXP project highlights what’s possible today. Its success depends largely on the underlying JavaScript engine Photoshop uses. Future updates may affect stability or introduce limitations, and it’s worth noting that features like Web Workers and POSIX threads are currently off-limits within UXP plugins. Still, the potential for multi-platform, high-performance code in a Photoshop environment is undeniable.
Inside the WasmUXP Demo
WasmUXP shows how to:
1. Load image data from Photoshop JS into WASM memory.
2. Perform simple pixel manipulations (e.g., increasing brightness).
3. Return the processed data back into the plugin as a JavaScript Uint8Array or Uint16Array.
This process largely mirrors how WASM works in a web browser, demonstrating how you can reuse the same logic for cross-platform image processing, including desktop, mobile, and server-side scenarios.
If you’d like to see the code in action, you can explore it here:
A Production-Ready Alternative
For a more production-ready project, consider my other library, michelerenzullo/LibGaussianBlur. This C++ implementation applies Gaussian blur through Fast Fourier Transforms (FFT). It’s designed to cross-compile to various targets, including WebAssembly, exemplifying a robust, high-performance image manipulation that is portable across multiple platforms and environments.
A Note of Gratitude
Special thanks to my collaborator Terry Johnson for sharing valuable insights on image and color manipulation.
In sum, compiling C++ libraries to WebAssembly can offer near-native performance across a wide range of devices and operating systems. While not (yet) officially supported in Photoshop’s UXP environment, the approach demonstrated here shows real promise for plugin developers looking to boost performance and simplify cross-platform deployment. If you’re curious about bringing your own high-performance image processing to Photoshop — or any other platform — take a look at the WasmUXP and LibGaussianBlur projects and give WebAssembly a try.
