@adobe/create-ccweb-add-on

Create a new add-on project for Adobe Express.

• Getting Started
  • Prerequisites
  • Create your first add-on project
  • Configure Developer Mode for Adobe Express
  • Load your add-on in Adobe Express
  • Make changes to your add-on
• Usage

Getting Started

Be sure to check out the documentation for developing Adobe Express add-ons. If you want to get started, quickly, be sure to take a look at the Quick Start Guide.

To quickly get started building an Adobe Express add-on, follow these steps, or watch this video.

Prerequisites

You'll need:

• Node 16 or better
• NPM 8 or better
• A text editor
• A free Adobe account — don't have one? Get one here

Create your first add-on project

npx @adobe/create-ccweb-add-on hello-world --template javascript
cd hello-world
npm run build
npm run start

Note: You'll be prompted to login to your Adobe account and you may also be prompted to accept the Adobe Developer Terms of Use if you haven't done so previously. You may also be prompted to configure SSL — you'll want to do to this step to ensure that your add-on can be loaded inside of Adobe Express while you develop it.

Configure Developer Mode for Adobe Express

You'll only need to do these steps once:

• Log in to Adobe Express and click on your avatar icon (this is in the upper right-hand corner of the page).
• Then click "Settings".
• In the "General" tab of the Settings dialog, find the "Add-on Development" setting and toggle this to "on".

Load your add-on in Adobe Express

Now that you've enabled developer mode, you can load an add-on you're building into Adobe Express by following these steps:

• Create a new document (or open an existing one)
• Click the "Add-ons" icon in the left-hand rail
• Click the "Your add-ons" tab
• At the bottom of this tab you'll see an "Add-on testing" toggle — switch this to "on"
• You'll get a prompt to specify the local connection address — the default is typically sufficent. Accept the default address.
• A new "In development" section should appear in your add-ons list w/ a "hello-world" add-on.
• Click this icon and your add-on will be running in a panel on the right-hand side of the page.

Make changes to your add-on

Now you can make changes to your add-on's code and your add-on will be reloaded automatically inside of Adobe Express to reflect your latest changes!

Usage

For full usage instructions on using the create-ccweb-add-on CLI, check the Development Tools documentation.