Code Playground - Script Mode

Script Mode in Code Playground allows you to quickly experiment with Adobe Express Document APIs without the complexity of building a full user interface.

What is Script Mode?

Script Mode is designed for rapid prototyping and learning. It provides a simplified environment where you can:

Test Document API calls directly
Learn how the Document APIs work
Experiment with document manipulation
Debug specific functionality

Note: The code you write in this mode is equivalent to the code you would write and use in the sandbox/code.js file in an add-on project running locally.

When to Use Script Mode

Use Script Mode when you want to:

Learn how the Document APIs work
Quickly experiment with Document API calls without UI considerations
Test specific API functionality
Debug isolated code snippets
Prototype document manipulation logic

How to Use Script Mode

Step 1: Select Script Mode

Click the Script button in the top left corner of the playground window
You'll see a single code editor where you can write your Document API code

Code Playground Script Mode

Step 2: Write Your Code

Enter your Document API code in the editor. You can:

Manipulate the document directly
Add shapes or text
Change styles and properties
Use the automatically available editor object

Step 3: Execute Your Script

Click the Run Code button in the right corner of the playground window to see changes in the current document.

Step 4: Configure Experimental APIs (Optional)

If you want to use Document APIs that are currently marked experimental:

Click on the properties icon to open the Manifest JSON editing modal
Toggle experimentalApis to enable experimental features

Script Mode Manifest Settings

Key Features

Global Await Support

The script runtime provides a global async wrapper, allowing you to use await directly when executing asynchronous code, without needing to wrap it in an async function:

Copied to your clipboard
// The script runtime provides an async wrapper to allow this:
const textNode = editor.context.selection[0];
const lato = await fonts.fromPostscriptName("Lato-Light");

This is particularly useful for API calls that return promises, where an await is needed to pause the execution of an async function until the Promise is resolved or rejected.

Automatic Imports

Script mode automatically imports the express-document-sdk modules, so you don't need to add import statements for the Document APIs. However, if you do add import statements, it won't harm anything.

No UI Building

Script mode is focused on Document API interactions and does not support building a user interface. If you want to create a UI, switch to Add-on Mode.

Once you switch to the Add-on Mode or to your local add-on development environment, you will need to make sure to handle your async functions and import statements manually.

Learning Resources

How-to Guides

Head over to our How-to guides to see some examples of using the Document APIs with example code snippets:

API References

Document APIs: Complete reference for all available Document APIs
Document Sandbox: Learn about the Document Sandbox environment

Transitioning to Add-on Mode

Once you've tested your code in Script mode, you can easily transition it into Add-on Mode to build a user interface around your functionality:

Use the Copy button in the right corner to quickly copy your code to the clipboard
Click the Add-on button to enter Add-on Mode
Paste the code into the Document JS tab
Add the necessary import statements and handle async functions manually
Build your UI in the HTML, CSS, and Iframe JS tabs