Code Samples
Find inspiration and great reference examples by checking out our code samples repo. A description of each sample and which features and technologies they use is available here for reference.
In addition to these code samples, you should also be sure to check out the Templates section in the Development Tools page for the options available for creating a starter project based on your favorite development stack.
Using the samples
- Clone the repo (or download the zip).
cdinto the folder of a sample you want to try.- Run
npm installto install the dependencies. - Run
npm run buildto build the source. - Run
npm run startto start to start the server with your bundled sample - Navigate to Adobe Express and load and use the locally running sample add-on with the add-on panel developer tools just as you would with your own.
NOTE: Before you run any samples, you must have previously run the npx @adobe/create-ccweb-add-on command to create your own add-on at least once to ensure the package is available and ready to use.
get-started
Demonstrates how to get started with add-on development with a simple app that greets a user after a name is entered.
Technologies Used:
- HTML
- JavaScript
- CSS
Note: No specific add-on SDK features are used in this sample, it is meant to run a simple JavaScript app that can be loaded and run in the add-ons panel.
import-images-from-local
Demonstrates how to use the add-on SDK's Import and Drag and Drop APIs to add images over click and drag and drop to a document.
Technologies Used:
- JavaScript
- CSS
Features Leveraged:
- Import Content to add the image to the document when the gif is clicked.
- Drag and Drop to support dragging and dropping images to the document.
import-images-using-oauth
Demonstrates how to use the add-on SDK's OAuth API to allow its users to connect their Dropbox account (in addition to leveraging some others listed below).
Technologies Used:
- React
- React Spectrum
- CSS
- Webpack
Features Leveraged:
- OAuth API's to authorize the user with the Dropbox service.
- Import Content to add images from the add-on to the document.
- Drag and Drop to support dragging and dropping images to the document.
- Client Storage to store the access_token in the IndexedDB store of the browser and reusing the same for the requests made to the Dropbox APIs.
use-client-storage
Demonstrates how to use the Client Storage API to persist user generated data through a todo list.
Technologies Used:
- TypeScript
- CSS
- Webpack
Features Leveraged:
- Client Storage to persist the todo items.
export-sample
Demonstrates how to use the add-on SDK's to export renditions of content in various formats including jpeg, png, pdf and mp4.
Technologies Used:
- JavaScript
- Spectrum Web Components
- Webpack
Features Leveraged:
- Export Content to generate renditions.
- Import Content to add the image to the document when the gif is clicked.
dialog-add-on
Demonstrates how to use the Modal Dialog APIs to pop-up variations of modals from your add-ons.
Technologies Used:
- React
- React Spectrum
- Webpack
Features Leveraged:
- Modal Dialogs to pop-up a variation of a modal reflecting the selections made from the add-ons panel UI.
licensed-addon
Demonstrates how to utilize the hash of the user ID to integrate an add-on with licensing and payment services and monetize effectively.
Technologies Used:
- React
- React Spectrum
- Webpack
Features Leveraged:
- Current User API to validate the current userid's.
- Modal Dialogs to pop-up a modal.
audio-recording-addon
Demonstrates how to record audio using the browser's media recorder API, converting the raw Blob into a WAV Blob and using the document's addAudio() API.
Technologies Used:
- JavaScript
Features Leveraged:
- Record audio using the Browser's API, transforming a raw Blob into a WAV Blob using an HPC codec.
- Add audio to the current document's page.
pix
A react-based add-on that illustrates a very simple 16x16 pixel editor add-on. Users can drag the resulting pixel art on to the canvas, but they can also import the current page as pixel art (downsampled to 16x16).
Technologies Used:
- HTML Canvas
- React
- Spectrum Web Components
- Webpack
Features Leveraged:
- Drag and Drop to add the dragged image to the document.
- Export Content to generate renditions.
- Client Storage to store the pixel art creations.
swc
Simple sample which illustrates how to use Spectrum Web Components without React or any other framework.
Technologies Used:
- HTML
- CSS
- JavaScript
- Spectrum Web Components
- Webpack
Features Leveraged:
- Application UI Theme to set the theme (only once the SDK is loaded to prevent any flash of unstyled content) and to listen and respond to theme changes.
swc-react-theme-sampler
Demonstrates the use of the SWC-React library, a set of React wrapper components for Spectrum Web Components (SWC), as well as illustrates some of the different Spectrum theme component properties provided with Spectrum (ie: main Express theme, scale and color) and how they affect the UI.
Technologies Used:
- React
- SWC-React
- Webpack
Features Leveraged:
- Application UI Theme to set the theme and to listen and respond to theme changes.
Giphy
Allows users to search for popular gifs and add them to the document.
Technologies Used:
- JavaScript
- Spectrum Web Components
Features Leveraged:
- Drag and Drop to support dragging and dropping images to the document.
- Import Content to add the image to the document when the gif is clicked.
QR Code
Allows users to create a QR code based on a URL and add it to their document.
Technologies Used:
- JavaScript
- Spectrum Web Components
Features Leveraged:
- Import Content to add the QR Code image to the document when it's clicked.
- Drag and Drop to support dragging and dropping QR Codes to the document.
gradients
Allows users to create two-color gradients of various shapes and direction, and add them to their Adobe Express project.
Technologies Used:
- Lit Web Components
- Spectrum Web Components
- 2D Canvas
- TypeScript
Features Leveraged:
- Create Bitmap Image in the document from bitmap data generated in the add-on iframe UI.
Document Sandbox Code Samples
The following code samples have been provided to help you get started using the Document Sandbox and Adobe Express Document APIs.
express-grids-addon
The sample add-on that the Grid System tutorial is based upon. Demonstrates how to use the Document APIs to create and manipulate shapes, context permanence, color pickers, and Spectrum Web Components usage.
express-stats-addon
The sample add-on that the Document Statistics tutorial is based upon. It demonstrates how to use the Communication APIs to invoke Document Sandbox method from the iframe UI and vice-versa, touching on asynchronous communication and context permanence. The add-on can build a list of statistics for the document, e.g., the number of class instances (shapes, text, images, and so on).
express-dimensions-addon
The sample add-on that the Document APIs Concepts article is based upon. It's used to discuss the Adobe Express Document Object Model, its Classes, Interface, and Constants. The add-on draws Dimensions (arrows measuring the width and height) around the selected shape.
communication-iframe-documentSandbox
Demonstrates using the Communication APIs to expose and proxy APIs bidirectionally between the iframe and document sandbox code environments via runtime.apiProxy() and runtime.exposeApi().
editor-apis
Demonstrates how to use the Document APIs to create various shapes and text, and add them to the document.
image-and-page
A more comprehensive example of using the Document APIs to add a page, images, and shapes, and clear the artboard.
express-addon-document-api-template
A barebone JavaScript template that implements the Document APIs.
