EnglishEspañol
  • Pixel-Nexus Logo
Extendscript hit the ground running

Extendscript hit the ground running
​

by Bert Plasschaert, Pixel-Nexus | 7 January 2025

This article should be used as a way to hit the ground running if you are in the market for some ExtendScript scripting. We'll provide some initial guidance to get you up and running as quickly as possible. At the end of the article you'll find an overview of sources providing more targeted and in-depth information which we do not go into in this article. In this article we will mainly use AfterEffects as our software to write scripts for, other Adobe products should be the same or similar. By the end of the article you are able to run ExtendScript directly from your editor into your Adobe application.

The what and why
​

A long time ago Adobe implemented a high level scripting language into their software. It allowed artists to create scripts or plugins into their software without the need to learn the C++ API. This scripting language is called Extendscript. ExtendScript is a JavaScript dialect based on the ECMAScript 3 specification with some remnants of ActionScript mixed into it. Because of this old (year 2000!) implementation of JavaScript it lacks a lot of the nice features of modern JavaScript.

Over the years Adobe tried to modernise this high level scripting language. First they released Adobe CEP (Common Extensibility Platform). This enabled the creation of HTML canvas panels and create web UI elements without the limitations of the ScriptUI framework which you were limited to in ExtendScript. CEP also enabled NodeJS embedding which enabled more modern javascript functionality and operating-system operations without going through the extendscript API. CEP still had its quirks and ultimately having a NodeJS instance running for each loaded CEP panel wasn't the best for performance.

This brings us to their latest attempt to modernise their high level scripting language: Adobe UXP (Unified Extensibility Platform). I wonder what the acronym of their third attempt will be, EEP? Extreme Extensibility Platform? But in all seriousness UXP does seem to be very promising. It fixes the NodeJS instance performance issue by unifying it all into one V8 engine instance. UXP expands on the web UI based approach of CEP by enabling support for web frameworks such as react! Spectrum UI CSS classes were already available for CEP, but now the user also has access to full fledged web components. Adobe provides a library of UXP Spectrum components. These are the same components they've used to build the application UI. However their implementation of HTML, JS and CSS is still a subset of the official spec and it's not their goal to have feature parity, so some clever workarounds might still be required. Next to ScriptUI being pushed out of the door, UXP is also the final nail in the coffin for ExtendScript. It is finally no longer supported and replaced by the UXP-API

I hear you thinking aha! Now I don't need to learn ExtendScript and can jump straight into UXP This is where my main point of criticism regarding UXP starts. As of now it's only available for Photoshop, InDesign and XD. There is a forum post form a user requesting updates on the implementation into other CC products. Here an Adobe staff member stated that there are currently internal tests running for UXP in Premiere Pro, but they fully endorse the use of CEP + ExtendScript for the time being. I understand that a full UI rewrite takes time especially if they want to use the components as first class UI elements. It's just unfortunate to see that tools like AfterEffects and PremierePro are not yet available 4 years after the announcement of UXP. The team behind UXP seems to be highly motivated to deliver a worthy replacement of ExtendScript and the moral on the forums seems to be hopeful. I look forward to the day that UXP is available throughout the CC suite, but for now we are stuck with ExtendScript.

I hope it's clear why I am writing a blogpost about a language older than my younger sibling.

Lets start with our setup
​

There seem to be two methods to develop ExtendScript (except restarting the application and working in the scripts directory directly):

ExtendScript Toolkit
​

The first method, and easiest to setup is using Extendscript Toolkit. This program is unfortunately no longer officially supported by Adobe, HOWEVER it does still work (in AfterEffect and Premiere). The program is no longer available from the Creative Cloud app browser, you need to download it from the Adobe CEP-Resources repository.

The ExtendScript Toolkit has a lot of nice feature such as:

  • Autocomplete
  • Data Browser (Object tree with their variables of current open AfterEffects instance)
  • Object Model Viewer (Easy to browse the documentation of all available classes)
  • Debug functionality
  • A console to log to! (using $.writeln("test");)

This all works directly out of the box, no configuration required.

ExtendScript Debugger VSCode Plugin
​

The second and officially the only maintained option is a plugin for VSCode. This plugin allows you to send the code to AfterEffects like the toolkit above, but requires some extra setup to implement the autocomplete.

The plugin provides the following features:

  • Debug functionality
  • A real programming environment
  • Autocomplete (possible but extra setup required)

Setting up Autocomplete for types | VSCode
​

  • create a new folder
  • open the folder in VSCode
  • download the type definitions from this repository
  • create a new folder in your VSCode Project called types
  • copy the following files from the type definitions repo into the newly created types folder
    • AfterEffects\23.0\index.d.ts
    • shared\global.d.ts
    • shared\JavaScript.d.ts
    • shared\PlugPlugExternalObject.d.ts
    • shared\ScriptUI.d.ts
    • shared\XMPScript.d.ts
  • create a jsconfig.json file in the root project folder with the following content:

{
    "compilerOptions": {
        "module": "none",
        "target": "ES3",
        "noLib": true,
        "checkJs": true
    }
}

configure Extendscript Debugger plugin | VSCode
​

  • install the VSCode plugin called: ExtendScript Debugger
  • click on the gear next to install and click on Add to workspace recommendation to add it to the workspace definition
  • go into the debugging tab on the left side of your VSCode window. You might have to right click on the sidebar and enable Run and Debug
  • click the create a launch.json file
  • select the ExtendScript option from the command palette menu
  • paste the following content into new launch.json file that should have automatically opened:

{
    "version": "1.0.0",
    "configurations": [
        {
            "type": "extendscript-debug",
            "request": "launch",
            "name": "Run in Extendscript Engine",
            "program": "${workspaceFolder}/src/test.jsx",
            "stopOnEntry": false,
        }
    ]  
}
  • you might have to enable allow breakpoints everywhere in your VSCode settings
    • File > Preference > Settings
    • Click on workspace
    • Search for this: debug.allowBreakpointsEverywhere
    • Enable this checkbox

Now you should be able to go to the Run and Debug tab on the left. Press the green play button. Select the version of the Adobe application you want to interact with, and voila. You might have to restart AfterEffects, it will prompt you with an error if that is the case.

There is another unofficial plugin available in VSCode called ExtendScript. This plugin does provide types out of the box, but does not check the JavaScript syntax. The setup above does more checking and linting compared to this plugin, based on my testing.

At this point you are able to run scripts from VSCode in two ways: Run in the Adobe application directly, using the following command from the command palette:

  • ExtendScript: Evaluate Script in Host... or with debug functionality:
  • use the debug window and play button

Fin.
​

You are now ready to start developing the next groundbreaking extension for your favourite Adobe Product. Below you can find a plethora of links that might help you navigate the journey ahead. Good luck!

Learning references
​

The videos from Code and Motion are packed with amazing sources. For absolute beginners I highly recommend watching this video. He goes over all the basic Javascript / Extendscript syntax you need to hit the ground running. For documentation or extra sources I've used this video to make the writeup above as well as some of the links below. Unfortunately the accompanying website from Code and Motion is offline. This prompted me to create this article as consolidation of initial getting started information.

Fortunately we can still access their site using the internet archive! If you prefer written articles over videos, use the following links:

Code references
​

Interesting sources
​