Developer Journey
Adobe Express is an AI-first, all-in-one, web-based app to easily create and share content for free. It's a powerful tool that can be used by everyone, from designers to marketers, to create stunning content in minutes.
Discover
What are add-ons?
Add-ons are extensions that enhance the functionality of Adobe Express, allowing users to be more productive and creative.
The add-on's use cases are endless, but some real-world examples are:
- Generate AI avatars from a selfie.
- Browse and insert voiceover and music to your project.
- Create stylish product mockups.
- Integrate with Google Drive and Google Photos to manage your files.
- And much more!
How to develop add-ons
Add-ons are lightweight programs that run in their own panel within the Adobe Express user interface; you can build add-ons with standard web technologies like HTML, CSS, and JavaScript. Ideally, they provide a seamless experience for the user—they should feel like they are part of the Adobe Express app!
Once you have your add-on ready, you can distribute it through the Adobe Express Marketplace. With a few clicks, it'll be made available to millions of Adobe Express users.
Monetize add-ons
Add-ons can be either free or paid, and anything in between like freemium or credit-based.
You're allowed to implement your payment processor of choice, the Adobe Express Marketplace does not take a cut of your revenue, so you keep 100% of your earnings! 💰
Adobe sponsors the development of selected use cases through the Adobe Fund for Design; check it out, and get paid to develop your add-on!
Resources
You now have a basic understanding of the Adobe Express ecosystem; if you want to dive deeper into the different parts of the ecosystem, check out the following resources:
Learn
The best way to learn is by doing! Adobe Express integrates a Playground environment that allows you experiment with the code directly in the application, without the need to set up a local development environment.
Run the Code Playground
You need to tick a few boxes in the application in order to enable it, as the animation below shows.
Once it's open, you can play with the code directly in the editor, and see the changes you make reflected in the document. The Script Mode is particularly useful for experimenting with the add-on's APIs. Please refer to the complete guide to the Code Playground for more details.
Explore the How-to Guides
To properly experiment with the Playground, head to the How-tos section: you'll find a collection of short guides and accompanying snippets that you can plug and play in the Playground editor. They cover the most common use cases, and are a great way to get familiar with the add-on SDK. Try the following as a starter:
When you feel more comfortable, you can tinker with these other use cases:
Scaffold a Local Development Environment
To build a more complex add-on, you can use our free Command Line Interface (CLI) tool, that can set up a new local project (on your machine) with all the necessary files and dependencies to get you started.
We're actively working on improving the Code Playground so that existing project can be migrated to the CLI seamlessly.
Next steps
Feel free to explore the rest of the How-to Guides to get exposed the entire range of possibilities that the add-on SDK offers. If you're ready to get your hands dirty and start building your own add-ons, keep reading!
Develop
Now that you feel comfortable with the Adobe Express add-on development's basics, let's take you to the next level.
Follow a Tutorial to build a complete add-on
We've created a set of tutorials that guide you through the process of building a full-featured add-on from scratch. We recommend you to start with the Design Grid creator, which covers the basics of the add-on SDK and how to use the Document API.
Feel free to explore the other Tutorials, or our collection of Code Samples; there's no better way to learn than by doing!
Discover our Design System
Adobe Express is based on the Adobe Spectrum design system, and your add-ons should follow the same design language.
We've created a set of UX Guidelines to help you get started; they cover the design principles, color, typography, layout and much more.
You should use Spectrum Web Components, a library of pre-built components that you can use to create a consistent UI for your add-on. You can test them in a sandboxed environment like Codepen.
Read our Implementation Guide or follow our two-part Bingo Card Generator add-on tutorial, which covers both basic JavaScript and React.
Master the Document API
To become an expert add-on developer, you must confidently orient yourself around the Document Sandbox API. New features are constantly being added, and it's crucial to learn how to read and decode the SDK Reference to know how to use them.
Read the Adobe Express Document API Concepts guide to learn about Object Oriented Programming concepts and the various Classes and Interfaces available to you.
Complete the Dimension annotation sample add-on exercise to practice your new knowledge.
Distribute
Now that you have built an add-on, you can share it with the world and start earning money!
The Adobe Express add-on's Marketplace
Add-ons can be privately distributed for testing purposes or published in the Adobe Express Marketplace.
Familiarize yourself with the details of our Review Process and follow the Submission Guidelines to prepare your add-on for review.
Improve your sales with the Monetization Guide
Add-ons can be monetized according to a variety of models (free, free & paid, free trial, or paid); Adobe does not take any commission on the sales, you keep 100% of your earnings!
If you want to learn more about it, please read the Monetization Guidelines, or watch the Marketing and monetizing Adobe Express add-ons video below, recorded at one of the monthly Adobe Express Office Hours community events.
Next steps
Congratulations 🎉 Pause for a moment and pat yourself on the back; you've now a solid understanding of the end-to-end Adobe Express add-on's developer journey!
Feel free to explore the rest of the documentation on your own, and if you have any feedback, please get in touch in our Discord server and join our monthly Office Hours. The developer community is a great place to get help, share your work, and learn from others. Have fun building!
