Adobe After Effects Script Runner for VS Code 🚀

Run Adobe After Effect scripts (.jsx, .tsx, .ts, .jsxbin) directly from VS Code

▲ Direct script execution from VS Code interface

中文说明 | English | Japanese

✨ Features

• 🎯 Direct Execution - Run AE scripts with one click
• 📦 TypeScript Support - Full .tsx/.ts compilation support
• 🔄 Multiple Build Tools - Auto-detect Rollup, Webpack, esbuild, or tsc
• 🌍 Multi-Language - English and Chinese interface
• 🖥️ Cross-Platform - Works on Windows and macOS
• ⚡ Smart Detection - Auto-detect running AE instances

🚀 Quick Start

1. Installation

Install from VS Code Marketplace

2. Usage

Open any .jsx, .tsx, .ts, or .jsxbin file

Make sure After Effects is running

Click the ▶ Run Script button in the editor toolbar

▲ Multi-version AE detection interface

3. For TypeScript Projects

Install dependencies:

npm install -D typescript rollup @rollup/plugin-typescript

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES3",
    "outDir": "./dist",
    "strict": true,
    "types": ["./node_modules/types-for-adobe/AfterEffects/22.0"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

⚙️ Configuration

Open VS Code settings and configure:

Basic Settings .vscode/settings.json

{
  "ae-tsx-runner.hostSpecifier": "aftereffects-25.0",
  "ae-tsx-runner.buildTool": "auto"
}

More info about hostSpecifier : Adobe.extendscript-debug hostAppSpecifier

Available Options

Rollup Configuration

You can read input/output paths from .vscode/settings.json:

javascript

// rollup.config.js
import{ readFileSync }from'fs';
importJSON5from'json5';

const settings =JSON5.parse(readFileSync('.vscode/settings.json','utf8'));
const input = settings['ae-tsx-runner.input']||'src/main.tsx';
const output = settings['ae-tsx-runner.output']||'dist/main.jsx';

exportdefault{
  input,
output:{file: output,format:'cjs'},
// ... other config
};

📁 Project Structure

your-project/
├── .vscode/
│   └── settings.json       # Auto-generated config
├── src/
│   └── main.tsx            # Your script
├── dist/
│   └── main.jsx            # Compiled output
├── tsconfig.json
├── rollup.config.js        # Optional
└── package.json

🔧 Build Tool Options

The extension supports multiple build tools:

Auto-detect (Recommended)

json

{
"ae-tsx-runner.buildTool":"auto" // default
}

Auto-detects: Rollup → Webpack → esbuild → tsc

Manual Selection

json

{
"ae-tsx-runner.buildTool":"rollup"// or "webpack", "esbuild", "tsc"
}

Custom Command

json

{
"ae-tsx-runner.customBuildCommand":"npm run build:ae"
}

📋 Examples

Example 1: Simple JSX Script

javascript

// script.jsx
alert("Hello from AE!");

Just click ▶ Run - no configuration needed!

Example 2: TypeScript Project

typescript

// src/main.tsx
interfaceCompSettings{
  name:string;
  duration:number;
}

const settings:CompSettings={
  name:"My Comp",
  duration:5
};

const comp = app.project.items.addComp(
  settings.name,
1920,
1080,
1,
  settings.duration,
30
);

alert(`Created: ${comp.name}`);

The extension will automatically compile and run!

🐛 Troubleshooting

"No running After Effects instance found"

Solution : Make sure After Effects is running before executing the script.

"Build failed"

Solution :

1. Check your tsconfig.json configuration
2. Make sure build tools are installed: npm install
3. Check the Output panel for detailed errors

"Output file not generated"

Solution :

1. Verify outDir in tsconfig.json
2. Check if dist folder has write permissions
3. Try running the build command manually

📝 Changelog

v0.9.0 (Latest)

• ✨ Added multi-build-tool support (Rollup, Webpack, esbuild, tsc)
• 🌍 Added internationalization (i18n) support
• ⚡ Improved configuration management
• 🐛 Fixed configuration save issues
• 📚 Enhanced error messages

v0.7.0

• ✅ Added macOS support
• 🔧 Improved AE version detection

Full Changelog

📄 License

MIT License © 2025 Yueli

🙏 Credits

Special thanks to:

• Types-for-Adobe for type definitions
• ae-script-runner for inspiration

💬 Feedback

Found a bug or have a feature request?

👉 Open an issue