Adobe Tech Blog
Published in

Adobe Tech Blog

Announcing UXP in Photoshop

A high level overview of UXP the platform

Two years ago we launched XD Extensibility powered by Creative Cloud’s new Unified Extensibility Platform (UXP for short), which enables JavaScript-based plugin development with near-native performance. Since launch, we’ve worked closely with our incredible developer community to evolve the platform in XD, which you’ve helped grow into a thriving ecosystem of more than 300 publicly available plugins which can be found in the Plugin Marketplace.

As with CEP (the Common Extensibility Platform) before it, UXP powers internal feature development in addition to 3rd party extensibility. Over the last few years, we’ve been working hard to integrate UXP across our portfolio of Creative Cloud apps where it’s already powering shared experiences such as the Home Screen, Share UI, and Libraries panel in Photoshop, Illustrator, InDesign, Premiere Pro, After Effects, Audition, Animate, and of course XD.

Keep an eye out for some of amazing new features built on top of UXP in Photoshop this year, with the launch of the Neural Filter Gallery and the new Discover Panel.

This MAX, we’re taking the next step on our 3rd party extensibility journey by bringing UXP-powered Plugins to Photoshop!

It’s been an incredible year partnering closely with the Photoshop Developer community — familiar faces and new— which you can read more about here on the Adobe Tech Blog.

You can also read about our incredible MAX launch partners, and the improvements being made to plugin discovery with the introduction of the Plugins Marketplace to the Creative Cloud Desktop app in our Creative Cloud Platform Launch Announcement.

In this post we’ll be providing a high level overview of UXP the platform, and its relationship each of the host applications it integrates with.

What is UXP?

Creative Cloud’s new unified extensibility platform, or UXP for short, is a shared technology stack that provides a unified, modern JavaScript execution environment, a common set of APIs for Filesystem and Network access, and will eventually include a high-performance Imaging APIs, access to ML Models for data processing and inference, and APIs for accessing Creative Cloud services on a user’s behalf, such as Libraries and Cloud Documents. It also includes a user interface layer, reminiscent of React Native, for laying out native controls with familiar browser APIs. The API surface also includes bindings with host specific APIs for interacting with the application and document itself.

The following architecture diagram offers a high level overview of relationship between UXP and each host application.

An overview of the relationship between UXP and each host application. “Host” refers to the host application, for example, Photoshop.

Unified JavaScript Execution Environment

When building panels with CEP, developers weren’t able to interface directly with the Adobe product — instead, they would use evalScript to pass control to code running in an ExtendScript environment which contains APIs for communicating with the host application. This meant maintaining two separate execution contexts. Passing code and data over this bridge is slow, and incredibly difficult to debug. A unified execution environment allows UXP UI and business logic to share the same context, which means no more need to use evalScript!

Modern JavaScript Execution Environment

When using ExtendScript, code was running in a JavaScript environment based on the 1999 ECMAScript 3 standard. Although not impossible, it made using modern JavaScript idioms difficult. Modern JavaScript engines have also put a lot of effort into being performant and better with regard to memory use. For those who are technically inclined, the desktop products that integrate UXP use V8 as the JavaScript VM.

Common APIs

Just like CEP and ExtendScript before it, there’s a common set of APIs that plugins need access to, regardless of the host app. These include file I/O and network, among others. Where possible, UXP follows existing standards, for instance, network I/O is accomplished using the XMLHttpRequest, fetch, and websocket APIs.

Host APIs

Each host product has a different extensibility surface for interacting with the application and the open document, and UXP allows the host product to expose those APIs directly to the developer. What these host APIs look like will vary from app to app, i.e., what XD provides will not be the same surface that Photoshop or InDesign or Audition will provide.

User Interface

UXP uses HTML and CSS in addition to native widgets to create a fast, fluid user interface that feels like it belongs in the host product. This means that plugin developers are able to get native look and feel with standard HTML/CSS APIs.

We’re also excited to introduce Spectrum UI controls in UXP! When we started this journey in XD, developers were able to use XD’s controls in their plugins. Since then, the Adobe Design organization has made great strides in moving the Creative Cloud App portfolio to a new design system, called Spectrum. This is the new design system that all new features are using across Creative Cloud applications, and UXP Plugin developers will benefit from this new design system with common controls, design patterns, and host theming support out of the box without needing to spend hours recreating each app’s look and feel in your plugin’s UI.

Get Started with UXP-powered Plugins in Photoshop and XD

If you’re a user, it’s really simple to start using UXP plugins right now. For both Photoshop and XD, simply open the Plugins menu and click “Browse (or Discover) Plugins”. You’ll be presented with the Plugin Marketplace with a filtered view for each application, and you can install plugins and start using them without ever having to restart the app.

The new plugin marketplace in the Creative Cloud Desktop app.

If you’re a developer who wants to create new plugins using UXP, it’s really easy to start building plugins — everything you need to get started is available online!

You’ll also want to create a new plugin project on the Adobe Developer Console so that you can register your plugin’s unique identifier, and download a starter project for either Adobe XD or Photoshop.

As you’re building your plugin, you’ll likely want to reach out for support and feedback from the developer community. We have forums available here that you can use to ask questions and interact with the wider developer community.

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store