How to Create Your First Adobe Panel in 6 Easy Steps

Update March 19, 2020: Next-generation Photoshop APIs will launch this year. Get involved early.

Update April 10, 2018: Our CEP Getting Started resources are now on GitHub! See our repo for the latest information.

If you’ve used a Creative Cloud product like Photoshop, Illustrator, or After Effects, you’ve used a panel. Some panels, like the Libraries panel, are provided by Adobe, and others are provided as extensions by third-party developers to let users customize their Creative Cloud experience for their unique workflows.

Developers and creative pros are often surprised to hear that it’s possible to write extensions using standard web development technologies: HTML, CSS, and JavaScript. This opens up numerous possibilities, and it’s quite simple to get started.

In this post, I’ll show you how to create a simple Photoshop panel in 6 easy steps.

Note: every extension ultimately needs to be signed to be distributed to the public. Adobe applications will not run any unsigned extensions. Thus, if you are in the midst of development and want to bypass the need to sign your extensions, please take a look at Debugging Unsigned Extensions section of CEP HTML Extension Cookbook before you begin.

1. Decide the Folder Structure

Let’s decide where to save your panel code first. Basically, your panel can be saved either at the root level or at the user level, depending on who’s allowed to use the panel (refer to CEP 8 HTML Extension Cookbook for the actual paths).

Except for the required CSXS folder, which must contain manifest.xml, the folder structure is pretty flexible. That said, I would recommend structuring your directories like this:

• CSXS — contains the manifest.xml file, which stores the panel configuration data. As I noted above, this is a requirement for your panel to show up in the host app.
• Client — contains the front-end code, such as HTML, JavaScript, CSS, the required Adobe CSInterface.js library, and any third-party libraries you might want to include (for example, jQuery)
• Host — contains the ExtendScript file (index.jsx), used to access and drive most features in the host app (in this case the host app is Photoshop)

This structure allows you to achieve a clear separation of concerns by devoting one folder to each.

2. Download CSInterface.js

You need to download the latest version of CSInterface.js, which is a library that enables you to control the panel and communicate with Adobe products like Photoshop, InDesign, Premiere Pro, and more.

3. Configure Your Panel in manifest.xml

There are many configurations you can change or add in this file, but to keep things simple, let’s focus on the minimum requirements (complete version of the manifest available at Adobe CEP Github).

• ExtensionBundleId: A unique bundle ID you assign to your panel like com.my.test
• Extension Id: A unique panel ID you assign to your panel. It usually follows this syntax: ExtensionBundleID + .panel = com.my.test.panel
• Host Name & Version: List of host application IDs and versions that your panel is built to support. To learn more, take a look at Adobe CEP HTML Extension Cookbook
• MainPath: Path to your index.html. Make sure the path to this file is from the top level directory of your code base
• ScriptPath: Path to your index.jsx. Make sure the path to this file is from the top level directory of your code base
• Menu: Your panel name that will appear in the dropdown menu
• Size: Default size of your panel

<?xml version='1.0' encoding='UTF-8'?>
<ExtensionManifest ExtensionBundleId="com.my.test" ExtensionBundleVersion="1.0.0" Version="8.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <ExtensionList>
    <Extension Id="com.my.test.panel" Version="1.0.0" />
  </ExtensionList>
  <ExecutionEnvironment>
    <HostList>
      <Host Name="PHSP" Version="19" />
      <Host Name="PHXS" Version="19" />
    </HostList>
    <LocaleList>
      <Locale Code="All" />
    </LocaleList>
    <RequiredRuntimeList>
      <RequiredRuntime Name="CSXS" Version="8.0" />
    </RequiredRuntimeList>
  </ExecutionEnvironment>
  <DispatchInfoList>
    <Extension Id="com.my.test.panel">
      <DispatchInfo>
        <Resources>
          <MainPath>./client/index.html</MainPath>
          <ScriptPath>./host/index.jsx</ScriptPath>
          <CEFCommandLine />
        </Resources>
        <Lifecycle>
          <AutoVisible>true</AutoVisible>
        </Lifecycle>
        <UI>
          <Type>Panel</Type>
          <Menu>My First Panel</Menu>
          <Geometry>
            <Size>
              <Height>500</Height>
              <Width>350</Width>
            </Size>
          </Geometry>
          <Icons />
        </UI>
      </DispatchInfo>
    </Extension>
  </DispatchInfoList>
</ExtensionManifest>

While this manifest.xml file seems large and complicated, most of it is boilerplate code. You can simply use the main template, edit parts of it, add desired tags, and add the manifest to your CXSX folder.

4. Write Your Front-end Code

Now, it’s time for you to start using your web development skills to build your panel. You can build this out with HTML, CSS, and JavaScript to suit your goals, but let’s have a look at the basic files.

• index.html: It’s a basic HTML file where you can set the structure for your panel’s UI. Make sure to include <script> tags for the downloaded CSInterface.js and your index.js.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Your First Panel</title>
</head>
<body>
    /* Simple HTML UI elements to get us started. */
    <h1>Your first panel in 6 easy steps</h1>
    <button id="open-button">Open</button>
    /* Add your script dependencies here. */
    <script type="text/javascript" src="CSInterface.js"></script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

• index.js: Be as imaginative as you can, but make sure to create an instance of CSInterface. Once you do that, one of its methods, evalScript(), will let you communicate to your ExtendScript code (host/index.jsx). Feel free to refer to the CEP Github repo if you are curious about what else you can do with CSInterface.

/* Create an instance of CSInterface. */
var csInterface = new CSInterface();
/* Make a reference to your HTML button and add a click handler. */
var openButton = document.querySelector("#open-button");
openButton.addEventListener("click", openDoc);
/* Write a helper function to pass instructions to the ExtendScript side. */
function openDoc() {
  csInterface.evalScript("openDocument()");
}

This is just an example of what you might do to get started with your client-side HTML and JavaScript. You can structure your front-end however you want and even use popular JavaScript frameworks like Angular JS, Ember JS, and more.

5. Write Your ExtendScript Code

ExtendScript code is different from your client-side JavaScript in that, via ExtendScript, you can access the host application’s functionalities, such as opening a document, editing it, exporting it, and almost anything the host application can do.

• index.jsx: Let’s create a function that opens one file inside Adobe Photoshop. Make sure to change the file name and the path to a file that actually exists in your filesystem.

function openDocument(){
  var fileRef = new File("~/Downloads/kobe.jpg");
  var docRef = app.open(fileRef);
}

Now, you’ve coded your first function that automates Photoshop functionality. Do you want to take a step further? The Adobe Photoshop Javascript Scripting Guide documents all of the functionality available to your panel.

6. Launch!

Open Photoshop > Window > Extensions > YourPanelName

If you saved your extension in either at the root or user level in the first step, your extension will be shown under Window > Extensions.

What Do You Think?

Do you feel like you are ready to get started? What other parts would you like me to cover? Debugging, creating a server, or connecting to third-party API services? You name it. Please let me know in the comments below.

Also, if you’d like to explore further, head over to Adobe I/O to learn more about CEP and get started building your own panel.

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