Getting Started With Software Development for Adobe Illustrator

For the creatives in the world interested in creating your tool to help manage your workflows on the Adobe Creative Cloud ecosystem, I understand your pain.

Some of the common pain points:

1. Outdated JavaScript Version: ExtendScript is based on an older version of JavaScript (ECMAScript 3), which lacks many modern features and conveniences found in the latest ECMAScript versions. This can make the development process feel outdated and less efficient.
2. Lack of Modern Development Tools: Common development tools like package managers (npm, yarn), bundlers (webpack, rollup), or modern frameworks (React, Vue) are not directly compatible with the ExtendScript environment, which can limit development practices.
3. No Direct DOM Manipulation: Unlike web development, where developers manipulate the Document Object Model (DOM) for dynamic changes, ExtendScript for Illustrator does not allow for direct DOM manipulation, leading to different approaches for UI development.
4. Limited Debugging Tools: ExtendScript tools for debugging are not as advanced as those available for modern JavaScript development. There is no built-in console for logging, and the ExtendScript Toolkit debugger can be less intuitive to use compared to browsers' developer tools or integrated development environment (IDE) debuggers.
5. Asynchronous Code Handling: The older version of JavaScript used in Illustrator's scripting environment does not support promises or async/await, which are now common patterns for handling asynchronous operations in modern JavaScript.
6. ScriptUI Framework: For creating user interfaces, developers must use Adobe's ScriptUI, which has a different paradigm from HTML/CSS and lacks the styling flexibility and dynamic capabilities developers are accustomed to on the web.
7. File System Access: Scripts running in Illustrator have access to the file system, which is different from the sandboxed environment of a web browser. This requires a different approach to file handling and can pose additional security considerations.

Whereas it can take only a to get a React app up and running, creating even a basic extension within Adobe is filled with issues.

So let’s get started.

To start, here are 3 resources to refer to for those who have a preference for different tech stacks:

Article Name	Link	Tech stack
CEP-React-Webpack		React, Webpack, TypeScript
Vue CEP Sample Extension		Vue, Extension Manifest v 9.0
Adobe Extension Testing		JS, Adobe After Effects

You can stop reading > and take a stab at these if you’d like. If you want a more theoretical path, look forward to the next part of this series.