Code Editor

The Code Editor tab transforms ScriptBox into a powerful development environment, allowing you to write, test, and run custom JSX scripts directly within Adobe Illustrator. Whether you're prototyping new automation ideas, testing code snippets, or running scripts from online resources, the Code Editor provides everything you need without leaving your workspace.

ㅤ

Accessing the Code Editor

Getting to the Code Editor is simple:

ㅤ

1. Click the Code Editor Tab

   • Look for the code icon (</>) in the tab navigation at the top of the ScriptBox panel
   • It's the 5th tab from the left
   • Click once to switch to the Code Editor view
     
     

2. First-Time Initialization

   • The first time you open the Code Editor, it may take a moment to initialize
   • The ACE editor library loads and configures itself automatically
   • Once loaded, the editor is ready for immediate use
     
     

3. Editor Interface

   • The editor appears with syntax highlighting enabled
   • A default "hello world" example is pre-loaded to help you get started
   • Control buttons appear below the editor for running, saving, and managing your code

ㅤ

ㅤ

Editor Interface Elements

The Code Editor interface consists of several key components designed for efficient script development:

ㅤ

Script URL Input Field

• Located at the top of the Code Editor tab
• Allows you to paste URLs to remote scripts
• Includes a clear button (×) that appears when text is entered
• Perfect for loading scripts from GitHub, Gists, or other online sources

ㅤ

Code Editor Area

• Large text editing area with syntax highlighting
• Supports JavaScript/JSX syntax with color-coded elements
• Line numbers displayed on the left for easy reference
• Auto-indentation and code formatting assistance
• Resizes automatically when you resize the ScriptBox panel

ㅤ

Editor Control Buttons

Four essential buttons below the editor provide core functionality:

ㅤ

1. Run Button (Play icon)

   • Executes the code currently in the editor
   • If the editor is empty, attempts to load and run code from the URL field
   • Keyboard shortcut: Cmd+Enter (Mac) or Ctrl+Enter (Windows)
     
     

2. Clear Button (Delete icon)

   • Clears all code from the editor
   • Resets to a clean slate with just a comment: // js input
   • Useful for starting fresh without manually selecting and deleting
     
     

3. Open Button (File icon)

   • Opens a file browser to select a .jsx or .js file from your computer
   • Loads the selected file's content into the editor
   • Perfect for editing existing scripts or loading templates
     
     

4. Save Button (Download icon)

   • Saves the current editor content as a .jsx file
   • Opens a save dialog where you can choose the filename and location
   • Automatically adds .jsx extension if not specified

ㅤ

Syntax Highlighting Features

The editor provides professional-grade syntax highlighting:

• Keywords: JavaScript keywords (var, function, if, for, etc.) are highlighted
• Strings: Text in quotes appears in a distinct color
• Comments: Single-line (//) and multi-line (/* */) comments are clearly marked
• Numbers: Numeric values are color-coded
• Functions: Function names and calls are visually distinguished
• Operators: Mathematical and logical operators are highlighted
• Theme Adaptation: Syntax colors automatically adjust to match your Illustrator theme (light or dark)

ㅤ

Additional Features

• Auto-completion: Basic code completion suggestions as you type
• Bracket Matching: Automatically highlights matching brackets and parentheses
• Smart Indentation: Automatically indents code based on context
• Soft Tabs: Uses spaces instead of tabs for consistent formatting (2 spaces per indent)
• Word Wrap: Long lines wrap to fit the editor width
• Undo/Redo: Full undo/redo support with Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z

ㅤ

Writing Custom JSX Scripts

The Code Editor is your workspace for creating custom automation scripts using Adobe's ExtendScript (JSX) language.

ㅤ

Getting Started with JSX

1. Clear the Editor

   • Click the Clear button to start with a blank slate
   • Or select all existing code and delete it
     
     

2. Write Your Script

   • Type or paste your JSX code into the editor
   • Use standard JavaScript syntax with Illustrator's DOM objects
   • Access Illustrator objects through the app object
     
     

3. Basic Script Structure

// Access the active document
var doc = app.activeDocument;

// Work with selections
if (doc.selection.length > 0) {
var selectedItem = doc.selection[0];
// Manipulate the selected item
selectedItem.fillColor = doc.swatches[0].color;
} 

// Create new objects
var rect = doc.pathItems.rectangle(100, 100, 200, 150);

ㅤ

Common JSX Patterns

ㅤ

Working with Selections:

// Check if anything is selected
if (app.activeDocument.selection.length > 0) {
// Loop through selected items
for (var i = 0; i <
app.activeDocument.selection.length; i++) {
var item = app.activeDocument.selection[i];
// Do something with each item
}
}

ㅤ

Creating Shapes:

var doc = app.activeDocument;
// Create a rectangle (top, left, width, height)
var rect = doc.pathItems.rectangle(100, 100, 200, 150);

// Create an ellipse (top, left, width, height)
var circle = doc.pathItems.ellipse(100, 100, 100, 100);

ㅤ

Modifying Colors:

var item = app.activeDocument.selection[0];
var newColor = new RGBColor();
newColor.red = 255;
newColor.green = 0;
newColor.blue = 0;
item.fillColor = newColor;

ㅤ

Tips for Writing Scripts

• Test Incrementally: Run your script frequently to catch errors early
• Use Comments: Document your code with comments for future reference
• Save Your Work: Save useful scripts as .jsx files for reuse
• Check Selection: Always verify that objects are selected before manipulating them
• Handle Errors: Use try-catch blocks for robust error handling
• Start Simple: Begin with basic operations and build complexity gradually

ㅤ

Learning Resources

• Adobe Illustrator Scripting Guide (official documentation)
• ExtendScript Toolkit documentation
• Online JSX script repositories and forums
• Built-in ScriptBox scripts (examine them for examples)

ㅤ

ㅤ

Running Code

Executing your scripts is straightforward with multiple options available.

ㅤ

Running Scripts from the Editor

1. Using the Run Button

   • Write or paste your code in the editor
   • Click the Run button (play icon) below the editor
   • The script executes immediately in Adobe Illustrator
   • Results appear in your document or as dialogs (depending on the script)

2. Using Keyboard Shortcut

   • Press Cmd+Enter (Mac) or Ctrl+Enter (Windows)
   • Faster than clicking for frequent testing
   • Works from anywhere within the editor

3. Execution Feedback

   • The script runs in the Illustrator environment
   • Any alerts or prompts defined in your script will appear
   • Check your document for visual changes
   • Console messages appear in the output area (if debug mode is enabled)

ㅤ

Running Scripts from URLs

If the editor is empty or contains only the placeholder comment, clicking Run will attempt to load and execute code from the URL field:

1. Paste a script URL in the URL input field at the top
2. Leave the editor empty or clear it
3. Click the Run button
4. The script loads from the URL and executes automatically

ㅤ

What Happens When You Run Code

• Code Validation: The editor checks for basic syntax errors
• Execution: Code is sent to Illustrator's ExtendScript engine
• Document Changes: Any modifications to your document take effect immediately
• Undo Support: You can undo script actions with Cmd/Ctrl+Z
• Error Handling: Syntax errors or runtime errors display as alerts

ㅤ

Execution Tips

• Save Before Running: Always save your document before running untested scripts
• Test on Copies: Test destructive operations on duplicated objects first
• Check Requirements: Ensure required objects are selected or available
• Read Error Messages: Error alerts provide clues about what went wrong
• Iterative Testing: Make small changes and test frequently

ㅤ

Common Execution Scenarios

• Selection-Based Scripts: Select objects first, then run the script
• Document-Wide Scripts: No selection needed; script affects entire document
• Generator Scripts: Create new objects without requiring selection
• Utility Scripts: Perform calculations or display information
• Batch Operations: Process multiple objects or artboards automatically

ㅤ

ㅤ

Loading Scripts from URLs

The Code Editor can load scripts directly from the internet, making it easy to run scripts shared online or stored in cloud repositories.

ㅤ

How to Load Scripts from URLs

1. Find a Script URL

   • Locate a JSX script hosted online (GitHub, Gist, personal website, etc.)
   • Copy the direct URL to the raw script file
   • For GitHub: Click "Raw" button to get the raw file URL
     
     

2. Paste the URL

   • Click in the URL input field at the top of the Code Editor
   • Paste the script URL (Cmd/Ctrl+V)
   • The URL appears in the input field
     
     

3. Load and Run

   • Click the "Run script from pasted link" button (play icon next to URL field)
   • Or click the Run button below the editor if the editor is empty
   • The script downloads, loads into the editor, and executes automatically

ㅤ

What Happens When Loading from URL

1. Download: ScriptBox fetches the script content from the URL
2. Load to Editor: The script code appears in the Code Editor
3. Execute: The script runs immediately in Illustrator
4. Available for Editing: The loaded code remains in the editor for modification or re-running

ㅤ

Supported URL Types

• GitHub Raw URLs: https://raw.githubusercontent.com/user/repo/main/script.jsx
• GitHub Gist URLs: https://gist.githubusercontent.com/user/id/raw/script.jsx
• Direct File URLs: Any publicly accessible .jsx or .js file
• HTTP/HTTPS: Both protocols are supported

ㅤ

URL Loading Tips

• Use Raw URLs: For GitHub, always use the "Raw" file URL, not the page URL
• Check Accessibility: Ensure the URL is publicly accessible (no authentication required)
• Verify Content: The URL should point directly to a script file, not an HTML page
• Clear URL Field: Use the × button to clear the URL after loading
• Save Useful Scripts: After loading, save scripts you want to keep locally

ㅤ

Example URLs

Valid URL format:

https://raw.githubusercontent.com/username/repository/main/scripts/my-script.jsx

Invalid URL format (GitHub page, not raw file):

https://github.com/username/repository/blob/main/scripts/my-script.jsx

ㅤ

Troubleshooting URL Loading

• Failed to Load: Check that the URL is correct and publicly accessible
• Wrong Content: Ensure the URL points to a raw script file, not an HTML page
• CORS Errors: Some servers may block cross-origin requests
• Network Issues: Verify your internet connection is active

ㅤ

Use Cases for URL Loading

• Quick Testing: Try scripts from online tutorials without downloading
• Shared Scripts: Run scripts shared by colleagues via URL
• Script Libraries: Access your personal script library stored in cloud repositories
• Community Scripts: Test scripts from forums or community resources
• Version Control: Always run the latest version from your Git repository

ㅤ

ㅤ

Opening Existing Script Files

Load scripts from your local file system to edit or run them in the Code Editor.

ㅤ

How to Open Script Files

1. Click the Open Button

   • Look for the Open button (file icon) below the editor
   • Click once to open the file browser
     
     

2. Select Your Script

   • A file selection dialog appears
   • Navigate to the folder containing your script
   • Select a .jsx or .js file
   • Click "Open" or "Select"
     
     

3. File Loads into Editor

   • The script content appears in the Code Editor
   • Previous content is replaced
   • The file is ready to edit or run

ㅤ

Supported File Types

• .jsx files: Adobe ExtendScript files (primary format)
• .js files: Standard JavaScript files
• Text-based: Any text file containing JavaScript code

ㅤ

What You Can Do After Opening

• Edit the Code: Modify the script as needed
• Run the Script: Execute it immediately with the Run button
• Save Changes: Save the modified version with a new name
• Test Variations: Experiment with different parameters or logic

ㅤ

Opening Files Tips

• Organize Your Scripts: Keep scripts in a dedicated folder for easy access
• Use Descriptive Names: Name files clearly to identify their purpose
• Backup Important Scripts: Keep copies of valuable scripts
• Version Your Scripts: Use version numbers in filenames (e.g., script-v2.jsx)

ㅤ

Common Workflows

ㅤ

Editing Existing Scripts:

1. Open the script file
2. Make your modifications in the editor
3. Test by running the script
4. Save with a new name or overwrite the original

ㅤ

Creating Script Templates:

1. Open a template script
2. Customize for your specific needs
3. Save as a new file with a descriptive name
4. Reuse the template for similar tasks

ㅤ

Debugging Scripts:

1. Open the problematic script
2. Add console.log() statements or alerts
3. Run and observe the output
4. Fix issues and test again

ㅤ

ㅤ

Saving Scripts as .jsx Files

Preserve your custom scripts by saving them as .jsx files for future use.

ㅤ

How to Save Scripts

1. Write or Edit Your Code

   • Ensure your script is complete and tested
   • The editor should contain the code you want to save
     
     

2. Click the Save Button

   • Look for the Save button (download icon) below the editor
   • Click once to initiate the save process
     
     

3. Choose Save Location

   • A save dialog appears
   • Navigate to your desired save location
   • Enter a filename (e.g., "my-custom-script")
   • The .jsx extension is added automatically if not specified
     
     

4. Confirm Save

   • Click "Save" in the dialog
   • The file is saved to your chosen location
   • A confirmation message appears

ㅤ

Saving Best Practices

ㅤ

Organize Your Scripts:

• Create a dedicated folder for custom scripts (e.g., "My Illustrator Scripts")
• Use subfolders to categorize scripts by function
• Keep related scripts together

ㅤ

Naming Conventions:

• Use descriptive names that explain what the script does
• Include version numbers for scripts you update frequently
• Use hyphens or underscores instead of spaces
• Examples: batch-resize-v2.jsx, color_randomizer_custom.jsx

ㅤ

Version Control:

• Save new versions with incremented numbers
• Keep old versions until the new one is thoroughly tested
• Document changes in comments at the top of the file

ㅤ

Documentation:

• Add comments at the top explaining what the script does
• Include usage instructions
• Note any requirements (selection needed, specific object types, etc.)
• Add your name and date for reference

ㅤ

Example Script Header:

/**
 * Custom Color Randomizer
 * Author: Your Name
 * Date: October 2025
 * Description: Applies random colors from document swatches to selected objects
 * Requirements: At least one object must be selected
 * Usage: Select objects, then run this script
 */

ㅤ

What to Save

• Working Scripts: Save any script that works correctly
• Templates: Save script templates for common tasks
• Experiments: Save interesting experiments even if incomplete
• Snippets: Save useful code snippets for future reference
• Modified Built-ins: Save customized versions of built-in scripts

ㅤ

Reusing Saved Scripts

After saving, you can:

• Open the script again using the Open button
• Add the script folder to Script Launcher for easy access
• Share the script file with colleagues
• Store scripts in version control (Git)
• Build a personal script library over time

ㅤ

Clearing the Editor

Reset the Code Editor to start fresh with a clean slate.

ㅤ

How to Clear the Editor

1. Click the Clear Button

   • Look for the Clear button (delete icon) below the editor
   • Click once to clear all content
     
     

2. Editor Resets

   • All code is removed from the editor
   • A simple comment placeholder appears: // js input
   • The cursor is positioned at the start
   • Ready for new code

ㅤ

When to Clear the Editor

• Starting a New Script: Begin with a blank canvas
• After Testing: Clear test code before writing production scripts
• Removing Examples: Clear the default example to start fresh
• Quick Reset: Faster than manually selecting and deleting all code

ㅤ

Alternative Clearing Methods

• Manual Selection: Select all (Cmd/Ctrl+A) and delete
• Open New File: Opening a file replaces existing content
• Load from URL: Loading a URL replaces existing content

ㅤ

Clear vs. Save

• Clear: Removes content without saving (cannot be undone)
• Save First: If you want to keep the current code, save before clearing
• No Confirmation: Clear happens immediately without confirmation dialog

ㅤ

Tips

• Save Important Code: Always save valuable scripts before clearing
• Use Undo: If you accidentally clear, use Cmd/Ctrl+Z immediately
• Quick Workflow: Clear → Write → Test → Save → Clear → Repeat

ㅤ

ㅤ

Drag and Drop Functionality

The Code Editor supports drag and drop for .jsx and .js files, making it even easier to load scripts.

ㅤ

How to Use Drag and Drop

1. Locate Your Script File

   • Find the .jsx or .js file in your file system
   • Open Finder (Mac) or File Explorer (Windows)
     
     

2. Drag the File

   • Click and hold the file
   • Drag it over the ScriptBox panel
   • Drop it onto the Code Editor area
     
     

3. File Loads Automatically

   • The script content appears in the editor
   • Previous content is replaced
   • Ready to edit or run

ㅤ

Supported File Types for Drag and Drop

• .jsx files (Adobe ExtendScript)
• .js files (JavaScript)

ㅤ

This feature provides the fastest way to load local scripts into the editor without using the Open button or file dialogs.

ㅤ