This post provides a general introduction to the framework alongside some personal thoughts. Future posts will probably be shorter and cover specific development topics as I work on migrating my Expresso Exporter plugin from CEP to UXP.
A little bit of history
If you’ve ever attempted to write a Photoshop script or plugin you know that it can be quite a challenge. As far as I know of, there have been three main ways to extend Photoshop until now:
- CEP (Common Extensibility Platform): can be used to create custom panels and dialogs in Photoshop and other apps. Every CEP plugin runs in a hybrid browser (CEF) / NodeJS environment with support for fairly modern web technologies. Unfortunately, any interaction with the underlying app still needs to happen via ExtendScript, making plugins this weird monster made of different technologies.
- C++ Plugins (CSDK): native C++ plugins, also available in Photoshop since forever, are the go-to way to implement filters, file importer/exporters and generally everything that is computation-heavy. Native plugins can also be included in CEP plugins, creating so called “hybrid” plugins.
All these solutions are either old, slow, complex, scarcely documented or buggy and, generally, a pain to work with. There are tools — including some written by yours truly — that try to improve things, but maintaining rather complex plugins has always proven problematic.
All hail UXP
UXP is under active development and it’s supported, to various degrees, in Adobe XD, Photoshop and InDesign. It looks like the long term plan is to integrate UXP in most Creative Cloud apps. Adobe seems to be taking UXP development seriously — an approach that also shows in the very well written and up-to-date documentation available online.
UXP plugins can be packaged to
.ccx files and installed with a double click, making it finally easy to distribute plugins even outside of the Adobe Marketplace without requiring third-party tools or custom installers.
Scripts (using the
.psjs extension) can also be run directly by double clicking the file.
Features that are not exposed via the DOM can be accessed via BatchPlay — an evolution of ExtendScript’s
As a game dev, things start to get really interesting with the Imaging API. The Imaging API allows to manipulate the pixels in a Photoshop document directly. This creates many interesting possibilities to write plugins that modify images on the fly or even create new images from scratch.
The Imaging API can potentially be even more interesting when paired with C++ logic. UXP recently gained support for hybrid plugins containing both C++ and JS/HTML in the same package.
It should be possible to use native C++ code for performance-intensive tasks such as image processing (i.e. normalizing a normal map, inverting its channels, etc.), making it an interesting option for game dev.
(As a side note, this is what I’m currently trying out for the next iteration of Expresso.)
UXP uses web technologies to create custom UI. Rendering is handled via a custom engine that promises better performance over the Chromium Embedded Framework used by CEP. Essentially, Adobe is building something that looks like a web browser, but isn’t a web browser:
Keep in mind that UXP is not a browser. It’s a platform that provides the ease of using web technologies to build plugins/scripts for desktop applications. Hence, it does not support all the HTML/CSS capabilities you can use in a browser.
On one hand, this choice makes it possible to expose features that make it easier to build plugins. Most HTML elements, for example, render in a way that’s consistent with the rest of the Photoshop UI, while CSS media queries and global variables make theme-aware styling a breeze:
When it comes to UI frameworks, React is the only real safe choice for now since it’s being used internally by Adobe. Vue seems to be supported too, but I haven’t tried using it so far.
Here’s some useful resources to get started with UXP development:
- UXP Documentation: official docs. Really well done with a lot of useful information.
- Adobe’s Tech Blog: news and tutorials from the horse’s mouth.
- Davide Barranca’s blog: lots of resources by a long time Photoshop plugin developer.
- Official Forum.
Continue to the next post in the series for an introduction about scripting with UXP.