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:

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

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.

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

Click the Script toggle in the top left corner of the playground window
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:

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

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

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