Options for User Interfaces in Adobe

← Back to Blog

Introduction

When developing extensions, plugins, or scripts for Adobe applications, one of the key decisions is how to build the user interface. Adobe provides several different technologies for creating UIs, each with its own strengths, limitations, and use cases. The right choice depends on the target application, the complexity of the interface, and the development approach you prefer.

This article explores the main options available for building user interfaces in Adobe products, from simple script dialogs to fully featured plugin panels.

ScriptUI (ExtendScript)

ScriptUI is the built-in UI framework available within ExtendScript. It provides a set of standard controls for creating dialog boxes and palette windows directly from scripts.

Available Controls

• Buttons, checkboxes, and radio buttons
• Text fields (single-line and multi-line)
• Dropdown lists and list boxes
• Sliders and progress bars
• Panels and group containers for layout
• Tab panels for organising complex interfaces
• Static text and images

Advantages

• No additional frameworks or dependencies required.
• Available in all Creative Cloud applications that support ExtendScript.
• Dialogs can be modal (blocking) or modeless (palette).
• Simple to implement for basic interfaces.

Limitations

• Visually dated appearance that does not match modern Adobe interfaces.
• Limited layout control and no support for modern CSS-style styling.
• Complex interfaces become difficult to manage and maintain.
• No support for web-based content, rich media, or custom rendering.

Example

var dlg = new Window("dialog", "Export Options");
var grp = dlg.add("group");
grp.add("statictext", undefined, "Format:");
var formatDD = grp.add("dropdownlist", undefined, ["PNG", "JPEG", "TIFF"]);
formatDD.selection = 0;

var qualityGrp = dlg.add("group");
qualityGrp.add("statictext", undefined, "Quality:");
var qualitySlider = qualityGrp.add("slider", undefined, 80, 1, 100);

dlg.add("button", undefined, "Export", {name: "ok"});
dlg.add("button", undefined, "Cancel", {name: "cancel"});

if (dlg.show() === 1) {
    alert("Exporting as " + formatDD.selection.text);
}

CEP (Common Extensibility Platform)

CEP panels are HTML-based extensions that run inside Adobe applications using an embedded Chromium browser (CEF). This allows developers to build rich, modern user interfaces using standard web technologies.

Technology Stack

• HTML5: For structure and content.
• CSS3: For styling, including animations and responsive layouts.
• JavaScript: For interactivity and logic.
• Node.js: Available in the extension's runtime for file system access and other server-side operations.
• CSInterface.js: Adobe's library for communicating between the HTML panel and the host application via ExtendScript.

Advantages

• Full web technology stack enables modern, visually rich interfaces.
• Can use popular frameworks such as React, Vue, or Angular.
• Node.js integration provides file system access and networking.
• Supported across most Creative Cloud applications.
• Panels persist as dockable windows within the application workspace.

Limitations

• Communication with the host application still relies on ExtendScript via CSInterface.evalScript(), which can be slow.
• The embedded Chromium version may lag behind current browser releases.
• Debugging requires a separate Chrome DevTools connection.
• Adobe has announced CEP is being phased out in favour of UXP.

Architecture

A CEP extension typically consists of:

my-extension/
  CSXS/
    manifest.xml          <!-- Extension configuration -->
  client/
    index.html            <!-- Main panel UI -->
    style.css             <!-- Styles -->
    index.js              <!-- Panel logic -->
  host/
    hostscript.jsx        <!-- ExtendScript for host app -->
  node_modules/           <!-- Node.js dependencies -->

UXP (Unified Extensibility Platform)

UXP is Adobe's modern replacement for both CEP and ExtendScript. It provides a native plugin runtime that supports modern JavaScript, HTML, and CSS for building plugin interfaces.

Key Features

• Modern JavaScript: Full ES6+ support including async/await, classes, modules, and more.
• Spectrum Web Components: Adobe's design system components are available natively for building consistent interfaces.
• Direct API Access: Plugins communicate directly with the host application's API without needing a separate ExtendScript layer.
• Better Performance: No embedded browser overhead; the rendering engine is built into the application.
• Developer Tools: The UXP Developer Tool provides a dedicated environment for building, loading, and debugging plugins.

Supported Applications

UXP is currently available in:

• Adobe Photoshop (from version 22.0)
• Adobe XD
• Adobe InDesign (from version 18.5)

Adobe continues to expand UXP support to additional applications.

Limitations

• Not yet available in all Adobe applications.
• The HTML/CSS rendering engine is not a full browser, so some web APIs and CSS features may be missing.
• Fewer community resources and examples compared to CEP.
• Still evolving, with API changes between versions.

C++ Plugin SDK

For maximum performance and deep integration, Adobe provides C++ SDKs for several applications. These allow developers to build native plugins with custom UI elements rendered directly by the application.

Applications with C++ SDKs

• Adobe Acrobat: The Acrobat SDK allows creation of native plugins with custom toolbars, panels, and menu items.
• Adobe Photoshop: Filter, automation, and file format plugins can be developed in C++.
• Adobe Illustrator: The Illustrator SDK provides access to native UI elements and deep application integration.
• Adobe InDesign: The InDesign SDK supports complex native plugin development.
• Adobe Premiere Pro: Native plugins for video effects, transitions, and import/export.

Advantages

• Best possible performance for computationally intensive tasks.
• Full access to the application's native UI toolkit.
• Deep integration with application internals.

Limitations

• Significantly more complex to develop and maintain.
• Platform-specific builds required (Windows and macOS).
• Steeper learning curve and longer development cycles.
• Must be recompiled for each new version of the host application.

Choosing the Right Approach

The best UI technology depends on your specific requirements:

• Quick automation with a simple dialog: Use ScriptUI with ExtendScript.
• Rich UI in an application that supports UXP: Use UXP with Spectrum components.
• Rich UI in applications without UXP support: Use CEP with HTML/CSS/JavaScript.
• Maximum performance and native integration: Use the C++ Plugin SDK.
• Cross-application compatibility: ExtendScript or CEP provide the broadest support.

As Adobe continues to roll out UXP across its product line, it will eventually become the recommended approach for most plugin and extension development. However, the other technologies remain important for applications and use cases where UXP is not yet available.