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.
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.
In the future, you can always open the Code Playground from Adobe Express.
From the Home Screen:
- Click the Add-ons button in the left rail.
- Switch on the Add-on development toggle in the top right corner.
- 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.

If you already have a document open:
- With any document open in Adobe Express, 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.

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.
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 Factor | Script Mode | Add-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
- Script Mode Guide: Learn how to use Script Mode for quick document manipulation
- Add-on Mode Guide: Build complete add-ons with UI and functionality
- Workflow & Productivity: Master keyboard shortcuts, saving, and session management
- Troubleshooting: Get help with common issues and FAQs
Next Steps
Now that you understand the basics of Code Playground, explore our resources to continue building robust add-ons:
- API References: Learn about the Document APIs and Add-on SDK.
- Tutorials: Follow step-by-step guides to build complete add-ons.
- How-To Guides: Master specific techniques and best practices.
- Local Development: Set up a full development environment for production-ready add-ons
- Code Samples: Get inspired by checking out our code samples to see what's possible.
- Community Support: Chat with fellow developers on Discord, in the Forums, or join us for our Office Hours.




