Hello, World!

In the great tradition of programming tutorials, we'll start by building a simple "Hello, World!" add-on.

This guide is divided into two tracks, which you can follow independently of each other, based on your experience and preferences.

The Code Playground path is based on a browser sandbox that runs instantly, requires no installation, and lets you explore add-on APIs with real-time feedback directly inside Adobe Express. If you are new to add-on development, or prefer to tinker-to-learn, then begin in the Playground to familiarise yourself with the environment; you can always try the CLI later.

The Command Line Interface (CLI) path will teach you to set up a local development environment, complete with a build pipeline, that allows you to build more complex add-ons that include external dependencies. This is the preferred path for developers who want fully control. You can always prototype rapidly in the Playground and transition to the CLI whenever project complexity calls for it.

Prerequisites

• An Adobe Express account (use an existing Adobe ID or simply create one for free).
• Basic familiarity with JavaScript, HTML and CSS.
• Node.js version 18 or higher (optional, only for the CLI track).

Enable Add-on Development Mode

Before you can build add-ons, you need to enable Add-on Development mode in Adobe Express—you only need to do this once.

Code Playground

The Code Playground is a browser-based editor built right into Adobe Express. No installation required—just open it and start coding.

1. Launch the Playground

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

Alternatively, see the following animation or expand the details below for a step-by-step guide.

2. Run Your First Script

The Code Playground allows you to operate in two modalities:

• Script Mode: Directly runs code that operates on the current document
• Add-on Mode: Creates an add-on with a custom User Interface and logic that can run code on the current document

Make sure you've selected the Script tab, which is pre-filled with a sample script:

Click the Run Code button on the Playground's toolbar to see the rectangle added to the document. Not much, but it's a start!

3. Edit the Script

Feel free to tweak the script to change the properties in the color object, or the translation and Rectangle dimensions; click Run Code again to see what happens.

To get a feel of the available APIs, visit the How-to guides and copy and paste code snippets into the Playground. For instance, check out the Use Text page and try the following script for the original "Hello World" experience.

Copy
Copied to your clipboard
// Create a new TextNode
const textNode = editor.createText("Hello,\nWorld!");
// Center the text on the page
const insertionParent = editor.context.insertionParent;
textNode.setPositionInParent(
  { x: insertionParent.width / 2, y: insertionParent.height / 2 },
  { x: 0, y: 0 }
);
// Add the TextNode to the document
insertionParent.children.append(textNode);
// Get the text content
console.log("Text: ", textNode.fullContent.text);

You've been using the Document Sandbox APIs, a very extensive set of APIs that let you create all sorts of objects and manipulate the Adobe Express documents. They are documented in the SDK References and explained in detail in the Platform Concepts section.

4. Create an Add-on

Click the Add-on tab to switch to the Add-on mode. You'll see that the Playground now shows four tabs:

• HTML: controls the add-on's User Interface.
• CSS: adds styles.
• Iframe JS: the add-on's logic.
• Document JS: the Document Sandbox APIs (that is, the code that you've been using in the Script tab).

This time, clicking Run Code will make a new add-on appear on the right side of the screen. You can see and change its code in the HTML, CSS (UI and styles) and Iframe JS tabs (button click event). The "Create Rectangle" button runs the Document JS code, which does exactly what you would expect!

Command Line Interface (CLI)

The Adobe Express add-on CLI allows you to create and host Adobe Express add-ons directly from your local machine.

1. Scaffold a New Project

Open your Terminal and run the following command:

Copy
Copied to your clipboard
npx @adobe/create-ccweb-add-on hello-world --template javascript-with-document-sandbox

This command will scaffold a new add-on based on "pure" JavaScript with Document Sandbox support—the set of APIs that allow you to interact with Adobe Express documents.

• npx is a package runner that can execute packages without installing them explicitly.
• @adobe/create-ccweb-add-on is the CLI maintained by Adobe to scaffold a new add-on.
• hello-world is the name of the add-on project you are creating.
• The --template flag specifies the template to use for the add-on; in this case, javascript-with-document-sandbox. The parameter is optional, and when missing, the CLI will prompt you to choose one from a list.

The Templates section on the Development Tools page provides a list of available options.

Copy
Copied to your clipboard
npx clear-npx-cache
npx @adobe/create-ccweb-add-on hello-world

Copy
Copied to your clipboard
npx @adobe/ccweb-add-on-scripts start --help

2. Build & Start Your Add-on

Next, execute the following commands to change into the newly created hello-world add-on folder, build the add-on, and start the add-on in a local server:

Copy
Copied to your clipboard
cd hello-world;
npm run build;
npm run start;

The start script will display messages like the following after it executes:

Copy
Copied to your clipboard
Done. Your add-on 'hello-world' is hosted on: https://localhost:5241/

Look for the Development Mode activation URL in the terminal output—click it to quickly enable development features without manually navigating to Settings, or read along.

The add-on's code is now running on a local server; you must tell Adobe Express to load it.

3. Load & Run Your Add-on

To sideload your add-on into Adobe Express, follow this link or click the button below.

You can also do it manually by following the steps below.

If you click the Create Rectangle button, you'll see the rectangle being added to the document.

4. Edit Your Add-on's Code

While your add-on is still loaded and running, open the src/index.html file and update the "Create Rectangle" string in the <button> to something else, like Add Text. In the src/sandbox/code.js replace the body of the createRectangle() function with the following, borrowed from the Use Text how-to guide:

Copy
Copied to your clipboard
// ...
  createRectangle: () => {
    // Create a new TextNode
    const textNode = editor.createText("Hello,\nWorld!");
    // Center the text on the page
    const insertionParent = editor.context.insertionParent;
    textNode.setPositionInParent(
      { x: insertionParent.width / 2, y: insertionParent.height / 2 },
      { x: 0, y: 0 }
    );
    // Add the TextNode to the document
    insertionParent.children.append(textNode);
    // Get the text content
    console.log("Text: ", textNode.fullContent.text);
  },
// ...

Note that the terminal where your add-on runs will display messages showing that the src has been rebuilt. Adobe Express has also updated the button label automatically, and the add-on will now add a "Hello, World!" text to the document.

You can continue to update your code while your add-on is running, and the add-on will automatically be rebuilt on save.

Next steps

Congratulations! You've completed this Hello, World! guide and run your first add-on!

Next, check out the Code Playground page to discover all its features, and read the How To Guides to familiarise with the APIs and plug & play with code snippets. If you've liked the CLI track, in the Local Development section you can find more details and debugging instructions.

When you feel comfortable, you can dive into the Complete Projects, where we'll help you build fully-working add-ons from the ground up—the best way to learn is by doing! We also have an extensive collection of code samples, that are a great resource to help you get started building your own add-ons.

Last updated 12/1/2025

Was this helpful?

Yes

No