ae-code

An Adobe panel providing the most advanced a scripting environment for in-app code editing.

Yes, this is a rip off of ovid by Tom Scharstein (even the above description mostly comes from his project 😬). I made this because I wanted to change the font size of the ovid-editor. And then I wanted to learn how it was made!

Features

• Run and edit code inside an Adobe host app (only tested in After Effects so far...)
• Hinting and auto completion based on types-for-adobe
• Automatic ES6 compilation for any ECMA methods that Adobe CEP panels don't support

Get started

This project was bootstrapped using another Tom Scharstein tool—bombino (check it out!)—which means you have two options:

Install a ZXP

1. Download from /archive/ae-code[VERSION_NUMBER].zxp
2. Install with ZXP Installer

Alternatively, create your own ZXP:

1. git clone https://github.com/fartinmartin/ae-code.git

2. cd ae-code && npm i

3. Use bombino to build, run, and sign

   ^{Be sure to have ZXPSignCmd installed in the root folder's parent directory.
   Those on macOS: choose ZXPSignCmd-64bit and rename it ZXPSignCmd.}

4. Install with ZXP Installer

Serve a live version

1. git clone https://github.com/fartinmartin/ae-code.git in valid CEP folder:

   ^{Windows: C:\Users\<USERNAME>\AppData\Roaming\CEP\extensions
   macOS: ~/Library⁩/Application Support/Adobe/⁨CEP⁩/extensions}

2. cd ae-code && npm i && npm run serve

3. Edit CXSX plist file

4. Open After Effects, navigate to Window > Extensions > ae-code

Todos

• Continue to steal from ovid...
• Support keyboard shortcuts that conflict with host apps (Del, Cmd + /, Cmd + S, etc...)
• I/O features (save, save as, open)
• Tabs
• User settings (any monaco editor options)
• Console panel
• Side panel file explorer?
• VS Code-like mini menu on bottom for resources?