Tools for Development#
A Basic Toolchain#
In order to build a UXP-based plugin, you'll need the following pieces of software:
A good text editor. Any modern developer-friendly text editor should work, but many people are using Visual Studio Code, which has deep integrations with the other pieces needed for UXP, and a wide variety of its own plugins to help with code formatting, syntax checking, JSON parsing, and so on.
The UXP Developer Tool provides a GUI that allows you to load, unload, and debug plugins. It also creates the
.ccxfiles you'll need to distribute your plugin to others.
If you're using the UXP CLI, you'll need a command-line environment. The Terminal app in macOS works fine, as does the Windows Command Prompt. VS Code has a built-in terminal window which is convenient. And there are a dozen other command-line interpreters on both platforms, including Windows PowerShell. If you're building plugins that don't involve using React, you probably don't need to worry about this.
npm: a "package manager" bundled with Node which helps manage your project's dependencies (i.e., other code and files that are needed to make your plugin work). If you're just using bare HTML/CSS/js, you probably don't need npm.
yarn: a "better" package manager than npm for Node. Many people, including those developing Photoshop UXP tools, are using yarn instead of npm.
Installing the Tooling#
UXP Developer Tool for macOS and Windows 10 - See the instructions here to install and run the UXP Developer Toolkit.
Node.js - Go to the Node.js download page, download the installer for your platform, and run it. This will also install npm.
yarn: In order to install yarn you'll need to have npm installed first (see above). After that, use this command:Copied to your clipboardnpm install yarn --global
If you're going to be building a non-trivial UI into your plugin, you should also become familiar with React.
Useful Utilities and Resources#
Kitchen Sink Example#
This is sample code, not actually a tool. But the uxp-ui-kitchen-sink-plugin is very useful in showing the kinds of controls you can use in UXP. It covers both Spectrum and native controls.
The HTML PLayground plugin is designed to make it easy to test out simple HTML layouts in Photoshop using UXP's layout engine. To use this, install the plugin using the UXP Developer Tool.
batchPlay Logger for ExtendScript developers#
Plug the ExtendScript BatchPlay logger jsx code into your ExtendScript project, and it will print out all your
executeActionGet methods in a format suitable for use with UXP's BatchPlay.