Document APIs

The Document APIs provide access to the user's document, allowing you to access the document structure and properties, and apply changes to it via the provided APIs.

Overview

Some examples of what you can do with the Adobe Express Document APIs are creating shapes, adding pages to the document, clearing the artboard and more. See the following sections for more details and examples of using these new APIs.

Access to Express Document APIs

An exported editor module is provided to enable access to the Document APIs. You can simply import this module into your script file code to access the methods provided below. For example:

Copy
import { editor } from "express"; // named import 'editor' from express module
Copied to your clipboard
import { editor } from "express"; // named import 'editor' from express module

See the example below for further usage details.

Example Code Snippet

The following code snippet illustrates how to use the Express Document APIs from the document sandbox code running in your code.js for instance, to access the current document, create a rectangle, set some properties and a fill for the rectangle, and finally, add it to the document:

Copy
import { editor, colorUtils } from "express";

const insertionParent = editor.context.insertionParent; // get node to insert content into

const rectangle = editor.createRectangle();
rectangle.width = 200;
rectangle.height = 150;
rectangle.translation = { x: 100, y: 20 };
console.log(rectangle); // for debugging purpose

const [red, green, blue, alpha] = [0.8, 0.6, 0.2, 0.7];
// Note: alpha param is optional
const aColor = colorUtils.fromRGB(red,green,blue,alpha)
const rectangleFill = editor.makeColorFill(aColor);
rectangle.fill = rectangleFill;

insertionParent.children.append(rectangle);
Copied to your clipboard
import { editor, colorUtils } from "express";

const insertionParent = editor.context.insertionParent; // get node to insert content into

const rectangle = editor.createRectangle();
rectangle.width = 200;
rectangle.height = 150;
rectangle.translation = { x: 100, y: 20 };
console.log(rectangle); // for debugging purpose

const [red, green, blue, alpha] = [0.8, 0.6, 0.2, 0.7];
// Note: alpha param is optional
const aColor = colorUtils.fromRGB(red,green,blue,alpha)
const rectangleFill = editor.makeColorFill(aColor);
rectangle.fill = rectangleFill;

insertionParent.children.append(rectangle);

Tutorials, References & Code Samples

Please see this extensive tutorial provided to help you build your first add-on using the Document APIs in our tutorials section. Also be sure to check out the full set of API documentation as well as the editor-apis and image-and-page code samples provided in the document sandbox samples for more details on using the Document APIs.

Last updated 12/7/2023

Was this helpful?

Yes

No