Note

Quickstart for building Adobe Express Add-ons in React.js

Adobe Express is a 'content creation' tool for things like social media scheduling, banners, and even TikTok videos!

There's also a lot of generative AI features, so it's not only fun to explore as a creator, but also as a plugin developer. I was surprised how quick it is to get set up in development mode, here's how I did it for React:

Quickstart for React

  1. Log into the Adobe Developer Console, and press create new project, then Add Plugin, and choose Express

Add plugin screen in Adobe Developer Console
  1. You'll get to this screen below. It has lots on there, but you just need to run this command in the terminal to set up using React.js (more options on this here):

npx @adobe/create-ccweb-add-on my-addon --template react-javascript --verbose

The command will set everything up, all at once - creating a folder with your project. Follow all the final instructions in the terminal, and you should end up with your project running. You'll be able to see it in the actual Adobe Express app on the website.

Access Dev Mode

With your app running, click the profile menu in Express, go to settings, and then from the Settings modal, toggle 'Add-on Development'. That'll add your development plugins in the Add-ons panel:

From profile menu, go to settings, then toggle on 'Add-on Development'

That's it! Now when you select your Add-on form the 'Your add-ons' panel on the left, a new panel on the right will open with a button as the starter app. That's the entry point to build your plugin from – no need to create panels yourself!