Code Playground - Script Mode

Script Mode in Code Playground is the quickest way to try out Document APIs that interact with Express document directly without the need for a full user interface.

What is Script Mode?

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

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

data-slots=text

data-variant=info
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 quickly experiment with Document API behavior—whether you’re learning the APIs, testing specific functionality, debugging isolated code snippets, or prototyping document-manipulation logic without UI considerations.

Script mode is ideal to test code snippets in our How-to guides.

How to Use Script Mode

Code Playground Script Mode

Step 1: Select Script Mode

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

Step 2: Write Your Code

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

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:

  1. Click on the properties icon to open the Manifest JSON editing modal
  2. 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:

// 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 all the necessary express-document-sdk modules like editor, colorUtils, and constants for the Document APIs.

data-slots=text, text2

data-variant=warning
You don't need to, and should not, add any import statements yourself in the Script Mode of the Code Playground; they are redundant and will cause errors.
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 add back the necessary 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

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:

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

Next Steps