@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.

$3

You'll need:

- Node 18 or better
- NPM 10 or better
- A text editor
- A free Adobe account — don't have one? Get one here

$3

``sh
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.

$3

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".

$3

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.

$3

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.