Expandable resource list

Express platform basics

Adobe Express is the quick and easy create-anything app, where users create videos, images, social posts, flyers, and more (...with help from AI tools and an ecosystem of Add-ons). Add-ons allow users to extend Express with new capabilities and workflows. Users can browse and install Add-ons in the marketplace.

📖 Read → Express Overview or What’s New from Help Center

📺 Watch → Videos from Learn Adobe Express

Understanding Add-ons

Express Add-ons are web applications that run in a sandboxed iFrame inside of Express. When a user interacts with an Add-on, the app can read or write to the Express document.

📖 Read → Add-ons Overview from Developer Guides

📖 Read → Add-ons Overview from Help Center

Setting up dev environment

Activate development mode in Express settings to start developing add-ons. Once enabled, there are two approaches to running custom code in Express:

1. Use the Code Playground to run custom code in the browser directly in Express. No setup needed – great for exploring and testing features to build into an Add-on.

2. Use the “Add-on testing” feature in Express to load an Add-on running on localhost. This allows developers to test their custom Add-on as they build, experiencing it exactly as an Express user would.

Building an Add-on

Working through Getting Started is a good approach to building. The tutorials in that section go deeper to provide a comprehensive overview of important Add-on concepts.

✨Frontend → Add-ons with great user experience (UX) perform better with users. The UX Guidelines can help build an Add-on UI that delights users and the Spectrum library can be used to style an Add-on to feel like a native part of Express.

🛠️Backend → Add-ons interact with the Express document using API. Some pre-built capabilities are available in the Add-on UI SDK while the Document APIs provide lower-level tools with more capabilities.

The Code Samples provide pre-built, working Add-on examples that combine both frontend and backend concepts.

Key resources and guides

Use the following resources to gain a deeper, more thorough understanding of Add-on development and build higher value Add-ons:

📖🧠Read → Learn the core Concepts behind the document API and see its latest features in the Changelog.

📖🛝Read, Tinker → Full of practical instructions and code samples, the How To section demonstrates how features work together to accomplish specific tasks.

📖🚀Read → Express users like Add-ons with good Performance and thoughtful use of Visual Elements.

📖🏖️Read → Understand the Add-on’s “sandbox” and what those boundaries mean to a web application running in Express by learning about the Add-on iFrame Context and Communication APIs.

Questions and troubleshooting

The ability to unblock yourself is an essential hackathon skill, but so is knowing when to ask for help.

🐛For troubleshooting, review the Debug guides and Add-ons FAQ. The Code Playground can help isolate and work through specific issues.

💬For questions during the hackathon, use the #add-on-hackathons channel in the Express Discord.

📺💬For non-time-sensitive questions, Express Office Hours is a great place to discuss them and get hands-on help.

Hackathon inspiration

Express Add-ons have the power to shape the future of content creation, but we need your help to build them. Thank you for participating!

“What Add-on should I build?”

Before considering our suggestions, we encourage you to be creative and try to think of your own ideas first.

Some ideas:
- Data visualization tools that add charts, infographics, or other interesting visuals.
- Automating tasks and workflows, especially by connecting with other systems.
- Use generative AI to create new visual elements well-suited for a specific use case for Express.
- Use assisted AI to improve a user’s experience in Express, like rewriting text in different tones.
- Education focused Add-ons. College? K-12? Teachers or students?
- Managed approval workflows on creative deliverables, enabling comments and iteration
- Add-ons that unlock new features in a specific type of content, like image, video, or presentation.
- Add-ons using the newest platform features

See what others have built
Browse the Add-on Marketplace to see what’s already there, missing, or could be better. Some Add-ons, like marketplace samples, are open-sourced and allow users to peak under the hood.

🏅Winning Add-ons from past hackathons:
MathTyper - converts complex math expressions into images to use in designs.
Watermarker - generate and apply a customized watermark to your page in Express.
Giggle Gear - streamlined meme builder with bonus AI features.
Version Control - enhanced saving, organizing, and reverting between design changes.
Brainrot - a sassy, clever design feedback tool.
Accessify - shows how a design looks with different visual impairments.

(^^ note that many new features have been unlocked for Add-ons since these past hackathons.)

End of hackathon and next steps

Congratulations on making it to the end of your event! Use a private link to distribute your Add-on during judging (if required). Celebrate your efforts – add the project to your portfolio page, resume, or LinkedIn profile.

💰Want to get paid to finish building Add-on and launch it in the marketplace? Submit your Add-on idea to the Adobe Fund for Design. If selected, developers receive a grant to finish building their Add-on and release it in production. All hackathon participants can apply.