Edit in GitHubLog an issue

Code Playground

The Code Playground is an in-app lightweight code editor for fast and effortless prototyping of Adobe Express add-ons.

Overview

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.

Code Playground Overview

Key Benefits

  • 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.
  • Persistence: Save your work and resume where you left off.
  • Programming Assistance: Typed definitions and auto-completion.

Who Should Use Code Playground?

The Code Playground is for beginners, learners, prototypers, designers, and experienced developers who want to explore Adobe Express add-on concepts quickly and easily. It provides a lightweight space to test ideas, learn the APIs, and experiment without needing a full development environment.

Prerequisites

Before using Code Playground, ensure you have:

  • An Adobe Express account.
  • A document open in Adobe Express (for testing your code).

Getting Started

How to Launch the Code Playground

To launch the Code Playground experience, follow this link or click the button below.

Code Playground Launch

In the future, you can always open the Code Playground from Adobe Express.

From the Home Screen:

  1. Click the Add-ons button in the left rail.
  2. Switch on the Add-on development toggle in the top right corner.
  3. In the Playground Sessions tab, either click the New Session button to start a new session, or select an existing session to resume working on it.

Code Playground from Home Screen

If you already have a document open:

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

Code Playground from Home Screen

Enable Add-on Development Mode

The Code Playground needs the add-on Development Mode to be enabled in order to work—you only need to toggle it once. When launching the Playground (e.g., from this link) for the first time, you'll be prompted to review the Developer Terms of Use and enable the Developer Mode.

Playground Terms of Use

You can also enable or disable the add-on Development Mode from the Settings panel in Adobe Express. See the Enable Add-on Development Mode section in the Hello, World! guide for detailed instructions.

Playground modes

The playground offers two distinct development modes (Script and Add-on), which are designed to suit different needs:

Mode Overview

Comparison FactorScript ModeAdd-on Mode
Intended Use
Quick document manipulation tests and API experimentation
Building complete add-ons with full UI and functionality
API Access
Global Await
Yes
No
Automatic Imports
Yes
No
UI Components
Not applicable
Full HTML/CSS/JS interface creation

When to Use Each Mode

Use Script Mode for learning and experimenting with the Document APIs—ideal for quick tests, isolated debugging, and prototyping document logic without UI considerations. Use Add-on Mode when developing a full add-on experience, including building UI, testing functionality within Adobe Express, and rapidly iterating on both interface and logic.

Quick Start Guides

Next Steps

Now that you understand the basics of Code Playground, explore our resources to continue building robust add-ons:

  • Privacy
  • Terms of Use
  • Do not sell or share my personal information
  • AdChoices
Copyright © 2025 Adobe. All rights reserved.