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.

data-slots=text

data-variant=info

Using the samples

• Clone the repo (or download the zip).
• cd into the folder of a sample you want to try.
• Run npm install to install the dependencies.
• Run npm run build to build the source.
• Run npm run start to 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: <br/>

• 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: <br/>

• JavaScript
• CSS

Features Leveraged:<br/>

• 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: <br/>

• React
• React Spectrum
• CSS
• Webpack

Features Leveraged:<br/>

• 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: <br/>

• TypeScript
• CSS
• Webpack

Features Leveraged:<br/>

• 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: <br/>

• JavaScript
• Spectrum Web Components
• Webpack

Features Leveraged:<br/>

• 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: <br/>

• React
• React Spectrum
• Webpack

Features Leveraged:<br/>

• 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: <br/>

• React
• React Spectrum
• Webpack

Features Leveraged:<br/>

• 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: <br/>

• JavaScript

Features Leveraged:<br/>

• 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: <br/>

• HTML Canvas
• React
• Spectrum Web Components
• Webpack

Features Leveraged:<br/>

• 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: <br/>

• HTML
• CSS
• JavaScript
• Spectrum Web Components
• Webpack

Features Leveraged:<br/>

• 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: <br/>

• React
• SWC-React
• Webpack

Features Leveraged:<br/>

• Application UI Theme to set the theme and to listen and respond to theme changes.

vue-starter

Simple sample which illustrates how to use Spectrum Web Components without React or any other framework.

Technologies Used: <br/>

• Vue.js
• HTML
• JavaScript
• Webpack
• CSS

Features Leveraged:<br/>

• Add-on SDK Ready method is checked to ensure the SDK is loaded before enabling the button in the UI (similar to the templates generated with our CLI, but based on Vue.js).

Giphy

Allows users to search for popular gifs and add them to the document.

Technologies Used: <br/>

• JavaScript
• Spectrum Web Components

Features Leveraged:<br/>

• 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: <br/>

• JavaScript
• Spectrum Web Components

Features Leveraged:<br/>

• 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: <br/>

• Lit Web Components
• Spectrum Web Components
• 2D Canvas
• TypeScript

Features Leveraged:<br/>

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