cleandocs

Code Playground

The Code Playground is an in-app lightweight code editor for fast and effortless prototyping.

What is Code Playground?

Code Playground provides developers with a low-barrier entry point for add-on development, allowing you to experiment and iterate on ideas directly without any setup, from within Adobe Express. From learning the basics to rapidly prototyping advanced concepts, Code Playground accommodates all stages of add-on development.

Who Should Use Code Playground?

The Code Playground is designed for:

Features


Feature Description
Real-Time Preview See your changes as you code, allowing for immediate feedback and faster adjustments.
Effortless Prototyping Quickly turn ideas into add-ons with minimal setup.
Rapid Implementation Fast-track your prototype to a product by directly pasting your code into an add-on template.
Script Mode An easy way to interact with the Document APIs quickly.
Programming Assistance Typed definitions and auto-completion.
Default Boilerplate Code Default boilerplate code for each tab helps you get started quickly.
Local Persistence Save your work to your browser’s local storage and resume where you left off, preventing accidental loss.
Keyboard Shortcuts Use keyboard shortcuts to save, run, and reset your code quickly.

Development Workflow Use Cases

The Code Playground is designed to support the following development workflow use cases:

How to Access Code Playground

Step 1: Enable Add-on Development Mode

Step 2: Open Code Playground

Choose Your Development Mode

The playground offers two distinct development modes:


Comparison Factor Script Mode Add-on Mode
Purpose Quick document manipulation tests Complete add-on UI and functionality
Environment Document Sandbox only Both iframe and Document Sandbox
API Access Document APIs Document APIs + Add-on UI SDK
Global Await Yes No
Automatic Imports Yes No
UI Components No UI building Full HTML/CSS/JS interface creation
Best For Testing document operations Building complete add-ons

Script Mode

When to Use Script Mode

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.

How to Use Script Mode

  1. Select the Script button in the top left corner of the playground window.
  2. Enter your Document API code in the editor. Manipulate the document directly, add shapes or text, change styles, and more using the automatically available editor object.
  3. Execute your script by clicking the Run Code button in the right corner of the playground window to see changes in the current document.

Code Playground Script Mode

  1. If you want to use Document APIs that are currently marked experimental, click on the properties icon to open the Manifest JSON editing modal and toggle experimentalApis:

Script Mode Manifest Settings

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

Key Considerations

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

In contrast, in Add-on mode you will need to manually wrap the code in an async function and use await in it, ie:

//sandbox.code.js or Document JS tab
loadFont: async () => {
  const textNode = editor.context.selection[0];
  const lato = await fonts.fromPostscriptName("Lato-Light");  
}

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.

Add-on Mode

When to Use Add-on Mode

How to Use Add-on Mode

  1. Click on the Add-on button (next to the Script button in the top left corner of the playground window).
  2. Write code for your add-on in each of the supplied tabs (described below). This includes HTML, CSS, and JavaScript code that will run in the iframe UI or in the Document Sandbox to interact directly with the Express document (optionally).
  3. Click Run Code to execute your add-on. Your add-on should open in an iframe on the right side of the Adobe Express window, ie:

Code Playground Add-on Mode

  1. If you need to set manifest properties for your add-on (ie: if you want to use APIs that are currently marked experimental, set permissions, OAuth domains etc), click on the properties icon to open the Manifest JSON editing modal:

Add-on Mode Manifest Settings

Add-on Mode Tabs

The Add-on mode features four tabs for organizing your code:

  1. HTML Tab

This tab is for writing HTML code that defines the structure of your add-on’s user interface. You can create elements like buttons, text fields, and layout containers here. Functionally, this tab mirrors the role of the index.html file you’d use in a typical add-on project.

  1. CSS Tab

Style your add-on’s HTML elements in this tab. Create a visually appealing interface consistent with Adobe Express design patterns. This section corresponds to the styles.css file in a standard add-on project.

  1. Iframe JS Tab

This tab is for writing JavaScript code that runs in the iframe context of your add-on. Here, you can interact with:

This environment corresponds to the code you would typically write in your index.js or UI JavaScript files in a full add-on project.

  1. Document JS Tab

This tab is where you write JavaScript code that interacts directly with the Adobe Express document. It runs in the Document Sandbox environment and gives you access to:

The Document JS tab corresponds to the code typically found in the code.js file of a complete add-on project.

Transitioning from Script Mode to Add-on Mode

Once you’ve tested your code in Script mode, you can easily transition it into the Add-on mode to build a user interface around your new functionality. Here’s how:

  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. Note: Don’t forget you’ll need to add the import statements for the Document APIs and handle your async functions manually in this mode.
  4. Modify your script code to be used in the add-on context along with your front-end logic in the HTML, Iframe JS, and CSS tabs. Use the initial sample code provided as a reference.
  5. If you set any manifest properties (ie: experimentalApis) while in Script mode, make sure to set the same in the Add-ons mode - Edit Manifest JSON Modal as well. These settings only apply to the context of the development mode you’re in.
  6. Click the Run Code button to execute your code within the context of your add-on.

Workflow Tips

Keyboard Shortcuts, local save and session management are all designed to help you get the most out of the Code Playground.

Keyboard Shortcuts


Action Windows/Linux macOS
Save Ctrl + Shift + S Cmd + Shift + S
Run Ctrl + Shift + Return/Enter Cmd + Shift + Return/Enter
Reset Ctrl + Shift + X Cmd + Shift + X
Increase font size Ctrl + Shift + Plus (+) Cmd + Shift + Plus (+)
Decrease font size Ctrl + Shift + Minus (-) Cmd + Shift + Minus (-)
Switch between tabs Ctrl + 1, 2, 3, 4 Cmd + 1, 2, 3, 4
View the typings suggestions Ctrl + space Cmd + space

TIP

Use the “…” button in the top right corner of the playground window to reference the available keyboard shortcuts, start a new session, link to documentation and more.

Saving Your Work

The Code Playground features local persistence to help prevent the loss of your work. This functionality ensures that your code is stored in your browser’s local storage, providing a safeguard against accidental data loss.

Code in the playground is not saved automatically. To ensure it’s saved, you need to take one of the following steps:

  1. Save your work using the keyboard shortcut for Save.
  2. Run the code via the Run Code button or with the keyboard shortcut for Run.
  3. Exit the playground (with the X in the upper right corner).

If you don’t want to save your work at any time, use the keyboard shortcut to Reset.

IMPORTANT

  • Only your most recent session is saved.
  • Storage is browser-specific (not synced across devices).
  • Code is not saved in incognito/private browsing modes.
  • Clearing browser data will delete saved code.

Resuming Sessions

There are two ways to resume working on your last saved session:

  1. Via the Add-ons Panel:

    • With any document open, click the Add-ons button in the left rail.
    • Select the Your add-ons tab.
    • Toggle on Code Playground at the bottom of the panel.

    Code Playground Add-on Mode

  2. Via the Your add-ons Page:

    • The Your add-ons page where you manage your add-ons now features a dedicated section for the playground, allowing you to quickly access your last session or create a new one.
    • Find the Playground Sessions section in the Your add-ons page.
    • Access your last session or create a new one with one click.

Manage Your add-ons page

Accessing “Your add-ons” Page

  • Without a document open: Click the Add-ons button in the left rail, then click the Add-on development toggle in the top right.
  • With a document open: Click the Add-ons button in the left rail, select the Your add-ons tab, then click the “Manage add-ons” link in the Add-on Testing section.

Resources

  • How-To Guides: Begin by experimenting with the code snippets found in our how-to guides to kickstart your development.
  • SDK/API References: Discover more about what you can do in your add-on by exploring our SDK References.
  • Code Samples: Get inspired by checking out our code samples to see what’s possible.
  • Ask Questions: Chat with fellow developers on Discord.

Next Steps: Build Your Add-on Locally

After experimenting with the Code Playground and when you’re ready to build out a full-blown add-on in a local development environment:

  1. Follow our Quickstart Guide to get your environment set up and your first add-on project created quickly.
  2. Copy the code from the Code Playground Add-on mode tabs to the corresponding files in your new project. Note: Don’t forget, if you’re copying code from Script mode into your sandbox/code.js file, you’ll need to add the import statements for the Document APIs and handle your async functions manually.
  3. Copy the JSON from the Manifest JSON Editor in the Code Playground into the src/manifest.json file in your new project.
  4. Run your add-on locally using the Adobe Express CLI to test and see your changes in real-time.

FAQs

What is the Adobe Express Code Playground?

The Adobe Express Code Playground is a lightweight code editor designed for fast and effortless prototyping. It allows you to experiment with simple code snippets to build and refine add-ons, quickly turning ideas into functional features.

Is it free to use?

Yes, the Code Playground is free to use. You can access all its features without any cost and start prototyping and creating add-ons right away.

Do I need coding experience?

While some basic coding knowledge is helpful, Playground is designed to be beginner-friendly and accessible. Its intuitive interface and simple code snippets make it easier for both experienced developers and those newer to coding to create and test add-ons.

How do I start creating add-ons?

Getting started is simple. activate the playground, experiment with code snippets, and start building your add-ons. Use the real-time preview feature to see your changes instantly and iterate on your ideas with ease.

Where can I go for help?

Join our Discord to chat with the add-on developer community.