Manage Pages

Learn how to programmatically create, access, and manage pages in Adobe Express documents using the Document API.

Understanding Pages in Adobe Express

In Adobe Express, documents are organized as a scenegraph - a hierarchical tree structure:

Document (root - ExpressRootNode)
- Pages (PageNode in PageList)
  - Artboards (ArtboardNode in ArtboardList - timeline scenes)
    - Content (shapes, text, images, groups, etc.)

Every page contains at least one artboard. When a page has multiple artboards, they represent keyframe "scenes" in a linear animation timeline. All artboards within a page share the same dimensions.

data-variant=info

data-slots=text

For more on the document scenegraph and node hierarchy, see the Document API Concepts Guide and Developer Terminology Guide.

data-slots=header, text1

data-variant=warning

Large Document Support: content vs. metadata

Adobe Express does not keep every page's content loaded at once. A page's metadata (id, name, width, height, add-on data) is always available, but its content (artboards and the nodes inside) is only accessible while the page is active—the current page, or a page you reach with visitPages(). To read or modify content across every page, see Support Large Documents and Large Document Support.

Add a Page

Use the editor.documentRoot.pages.addPage() method to create a new page with specified dimensions.

Example: Add a Standard Page

              data-slots=heading, code

              data-repeat=2

              JavaScript
            
              pt"-data-playground-url-stage="https\://stage.projectx.corp.adobe.com/new"-data-playground-url="https\://new\.express.adobe.com/new"

// sandbox/code.js
import { editor } from "express-document-sdk";

// Define page dimensions (width x height in pixels)
const pageGeometry = {
  width: 1080,
  height: 1080
};

// Add a new page with the specified dimensions
const newPage = editor.documentRoot.pages.addPage(pageGeometry);

console.log("New page created:", newPage);
console.log("Page dimensions:", newPage.width, "x", newPage.height);

              TypeScript
            
              // sandbox/code.ts
import { editor, PageNode, RectangleGeometry } from "express-document-sdk";

// Define page dimensions (width x height in pixels)
const pageGeometry: RectangleGeometry = {
  width: 1080,
  height: 1080
};

// Add a new page with the specified dimensions
const newPage: PageNode = editor.documentRoot.pages.addPage(pageGeometry);

console.log("New page created:", newPage);
console.log("Page dimensions:", newPage.width, "x", newPage.height);

data-slots=text

data-variant=info

When you call editor.documentRoot.pages.addPage(), the new page automatically becomes the active page and the default insertion point for new content. The viewport also switches to display the new page's artboard.

Example: Add Pages with Different Dimensions

              data-slots=heading, code

            

              data-repeat=2

            

              JavaScript
            

              // sandbox/code.js
import { editor } from "express-document-sdk";

// Add an Instagram post page (square)
const instagramPage = editor.documentRoot.pages.addPage({
  width: 1080,
  height: 1080
});

// Add a story page (vertical)
const storyPage = editor.documentRoot.pages.addPage({
  width: 1080,
  height: 1920
});

// Add a landscape page
const landscapePage = editor.documentRoot.pages.addPage({
  width: 1920,
  height: 1080
});

console.log("Created 3 pages with different dimensions");

            

              TypeScript
            

              // sandbox/code.ts
import { editor, PageNode, RectangleGeometry } from "express-document-sdk";

// Add an Instagram post page (square)
const instagramPage: PageNode = editor.documentRoot.pages.addPage({
  width: 1080,
  height: 1080
} as RectangleGeometry);

// Add a story page (vertical)
const storyPage: PageNode = editor.documentRoot.pages.addPage({
  width: 1080,
  height: 1920
} as RectangleGeometry);

// Add a landscape page
const landscapePage: PageNode = editor.documentRoot.pages.addPage({
  width: 1920,
  height: 1080
} as RectangleGeometry);

console.log("Created 3 pages with different dimensions");

            

Access Pages

Get the Current Page

              data-slots=heading, code

              data-repeat=2

              JavaScript
            
              // sandbox/code.js
import { editor } from "express-document-sdk";

// Get the currently active page
const currentPage = editor.context.currentPage;

console.log("Current page dimensions:", currentPage.width, "x", currentPage.height);
console.log("Number of artboards:", currentPage.artboards.length);

              TypeScript
            
              // sandbox/code.ts
import { editor, PageNode } from "express-document-sdk";

// Get the currently active page
const currentPage: PageNode = editor.context.currentPage;

console.log("Current page dimensions:", currentPage.width, "x", currentPage.height);
console.log("Number of artboards:", currentPage.artboards.length);

Access All Pages

              data-slots=heading, code

              data-repeat=2

              JavaScript
            
              // sandbox/code.js
import { editor } from "express-document-sdk";

// Get all pages in the document
const allPages = editor.documentRoot.pages;

console.log("Total pages in document:", allPages.length);

// Iterate through all pages
for (const page of allPages) {
  console.log(`Page dimensions: ${page.width} x ${page.height}`);
}

// Access specific pages by index
const firstPage = allPages[0];
const lastPage = allPages[allPages.length - 1];

              TypeScript
            
              // sandbox/code.ts
import { editor, PageList, PageNode } from "express-document-sdk";

// Get all pages in the document
const allPages: PageList = editor.documentRoot.pages;

console.log("Total pages in document:", allPages.length);

// Iterate through all pages
for (const page of allPages) {
  console.log(`Page dimensions: ${page.width} x ${page.height}`);
}

// Access specific pages by index
const firstPage: PageNode = allPages[0];
const lastPage: PageNode = allPages[allPages.length - 1];

Working with Page Content

Add Content to a Specific Page

              data-slots=heading, code

              data-repeat=2

              JavaScript
            
              script"-data-playground-url-stage="https\://stage.projectx.corp.adobe.com/new"-data-playground-url="https\://new\.express.adobe.com/new"

// sandbox/code.js
import { editor } from "express-document-sdk";

// Create a new page
const newPage = editor.documentRoot.pages.addPage({
  width: 1080,
  height: 1080
});

// The new page is automatically active, so content will be added to it
const textNode = editor.createText("Content on the new page!");
textNode.translation = { x: 100, y: 100 };

// Add to the current insertion parent (the new page's artboard)
editor.context.insertionParent.children.append(textNode);

console.log("Added text to the new page");

              TypeScript
            
              // sandbox/code.ts
import { editor, PageNode, StandaloneTextNode, ContainerNode } from "express-document-sdk";

// Create a new page
const newPage: PageNode = editor.documentRoot.pages.addPage({
  width: 1080,
  height: 1080
});

// The new page is automatically active, so content will be added to it
const textNode: StandaloneTextNode = editor.createText("Content on the new page!");
textNode.translation = { x: 100, y: 100 };

// Add to the current insertion parent (the new page's artboard)
const insertionParent: ContainerNode = editor.context.insertionParent;
insertionParent.children.append(textNode);

console.log("Added text to the new page");

Work with Page Artboards

              data-slots=heading, code

            

              data-repeat=2

            

              JavaScript
            

              // sandbox/code.js
import { editor } from "express-document-sdk";

// Get the current page
const currentPage = editor.context.currentPage;

// Access the page's artboards
const artboards = currentPage.artboards;
console.log("Number of artboards:", artboards.length);

// Get the first (and typically only) artboard
const firstArtboard = artboards.first;
console.log("First artboard dimensions:", firstArtboard.width, "x", firstArtboard.height);

// Add content directly to a specific artboard
const rect = editor.createRectangle();
rect.width = 200;
rect.height = 200;
rect.translation = { x: 50, y: 50 };

firstArtboard.children.append(rect);

            

              TypeScript
            

              // sandbox/code.ts
import { editor, PageNode, ArtboardList, ArtboardNode, RectangleNode } from "express-document-sdk";

// Get the current page
const currentPage: PageNode = editor.context.currentPage;

// Access the page's artboards
const artboards: ArtboardList = currentPage.artboards;
console.log("Number of artboards:", artboards.length);

// Get the first (and typically only) artboard
const firstArtboard: ArtboardNode = artboards.first!;
console.log("First artboard dimensions:", firstArtboard.width, "x", firstArtboard.height);

// Add content directly to a specific artboard
const rect: RectangleNode = editor.createRectangle();
rect.width = 200;
rect.height = 200;
rect.translation = { x: 50, y: 50 };

firstArtboard.children.append(rect);

            

Common Patterns and Best Practices

Page Creation Workflow

              data-slots=heading, code

            

              data-repeat=2

            

              JavaScript
            

              // sandbox/code.js
import { editor } from "express-document-sdk";

function createTemplatePages() {
  // Define common page sizes
  const pageSizes = {
    instagram: { width: 1080, height: 1080 },
    story: { width: 1080, height: 1920 },
    landscape: { width: 1920, height: 1080 },
    a4: { width: 595, height: 842 }
  };

  // Create pages for each template
  const pages = {};

  for (const [name, dimensions] of Object.entries(pageSizes)) {
    const page = editor.documentRoot.pages.addPage(dimensions);
    pages[name] = page;

    // Add a title to each page
    const title = editor.createText(`${name.toUpperCase()} Template`);
    title.translation = { x: 50, y: 50 };
    editor.context.insertionParent.children.append(title);

    console.log(`Created ${name} page: ${dimensions.width}x${dimensions.height}`);
  }

  return pages;
}

// Create template pages
const templatePages = createTemplatePages();

            

              TypeScript
            

              // sandbox/code.ts
import { editor, PageNode, RectangleGeometry, StandaloneTextNode } from "express-document-sdk";

interface PageSizes {
  [key: string]: RectangleGeometry;
}

function createTemplatePages(): { [key: string]: PageNode } {
  // Define common page sizes
  const pageSizes: PageSizes = {
    instagram: { width: 1080, height: 1080 },
    story: { width: 1080, height: 1920 },
    landscape: { width: 1920, height: 1080 },
    a4: { width: 595, height: 842 }
  };

  // Create pages for each template
  const pages: { [key: string]: PageNode } = {};

  for (const [name, dimensions] of Object.entries(pageSizes)) {
    const page: PageNode = editor.documentRoot.pages.addPage(dimensions);
    pages[name] = page;

    // Add a title to each page
    const title: StandaloneTextNode = editor.createText(`${name.toUpperCase()} Template`);
    title.translation = { x: 50, y: 50 };
    editor.context.insertionParent.children.append(title);

    console.log(`Created ${name} page: ${dimensions.width}x${dimensions.height}`);
  }

  return pages;
}

// Create template pages
const templatePages = createTemplatePages();

            

Check Page Properties

For detailed page information including content analysis and print readiness, see the Page Metadata How-to Guide. The analysis below reads only page metadata (dimensions), which is available for every page. To traverse or modify the content of every page (artboards and the nodes inside), use visitPages()—under Large Document Support, content is only accessible on the active page. See Support Large Documents.

              data-slots=heading, code

            

              data-repeat=2

            

              JavaScript
            

              // sandbox/code.js
import { editor } from "express-document-sdk";

function analyzeDocument() {
  const pages = editor.documentRoot.pages;

  console.log("=== Document Analysis ===");
  console.log(`Total pages: ${pages.length}`);

  // Page metadata (dimensions) is available for every page, active or not
  for (let i = 0; i < pages.length; i++) {
    const page = pages[i];
    console.log(`\nPage ${i + 1}:`);
    console.log(`  Dimensions: ${page.width} x ${page.height}`);
  }
}

// Analyze the current document
analyzeDocument();

            

              TypeScript
            

              // sandbox/code.ts
import { editor, PageList, PageNode } from "express-document-sdk";

function analyzeDocument(): void {
  const pages: PageList = editor.documentRoot.pages;

  console.log("=== Document Analysis ===");
  console.log(`Total pages: ${pages.length}`);

  // Page metadata (dimensions) is available for every page, active or not
  for (let i = 0; i < pages.length; i++) {
    const page: PageNode = pages[i];
    console.log(`\nPage ${i + 1}:`);
    console.log(`  Dimensions: ${page.width} x ${page.height}`);
  }
}

// Analyze the current document
analyzeDocument();

            

Key Concepts & Best Practices

Important: Use the Correct Method

data-slots=header, text1, text2

data-variant=warning

Pages require a unique API path

Unlike other creation methods (like editor.createRectangle()), pages require the full path through the document structure:

❌ editor.addPage() (doesn't exist)
❌ editor.createPage() (doesn't exist)
✅ editor.documentRoot.pages.addPage() (correct)

Important Behaviors

Automatic activation - Adding a page automatically makes it the active page and switches the viewport to it
Required dimensions - The addPage() method requires a geometry parameter with width and height
Default artboard - Every new page automatically gets one default artboard
Shared dimensions - All artboards within a page must have the same dimensions
Insertion context - editor.context.insertionParent points to the active artboard where new content is added

Integration with Other APIs

Pages created with editor.documentRoot.pages.addPage() integrate seamlessly with other Adobe Express APIs:

Metadata APIs - Use newPage.id with Add-on UI SDK metadata APIs to retrieve detailed page information. See the Page Metadata How-to Guide for complete examples.
Rendition APIs - Export specific pages as images, PDFs, or videos. See Create Renditions.
Selection APIs - Work with selected content on pages. See Handle Element Selection.
Content APIs - Add text, shapes, images, and other content to page artboards using the Document API.

FAQs

Q: How do I add a page programmatically?

A: Use editor.documentRoot.pages.addPage(dimensions) with page dimensions. There is no createPage() method.

Q: Why doesn't createPage() work?

A: The Document API uses editor.documentRoot.pages.addPage() for pages, not createPage(). Use editor.documentRoot.pages.addPage(dimensions) instead.

Q: How do I get the current page?

A: Use editor.context.currentPage to access the currently active page.

Q: How do I navigate between pages?

A: Adding a page automatically switches to it. You can also access pages via editor.documentRoot.pages.

Q: What happens when I add a page?

A: A new page with a default artboard is created and automatically becomes the active page. The artboard becomes the insertion parent for new content.

Q: Can I remove pages?

A: Currently, the Document API doesn't provide a direct method to remove pages programmatically.

Q: How do I access all pages in a document?

A: Use editor.documentRoot.pages to access the PageList containing all pages.

Q: What are the minimum requirements for a page?

A: Every page must have at least one artboard. The editor.documentRoot.pages.addPage() method automatically creates a default artboard.

Q: Can I read the content of every page at once?

A: Under Large Document Support, only page metadata (id, name, dimensions) is available for every page; content—artboards and the nodes inside—is available on the active page. To read or modify content across all pages, use visitPages(), covered in the Support Large Documents how-to.

Page Information and Metadata

Page Metadata - Get detailed information about pages, including dimensions, content types, and selected page IDs
Document Metadata - Access document-level information and listen for document events
getSelectedPageIds() API - Retrieve IDs of currently selected pages

Working with Page Content

Position Elements - Position and arrange content within pages and artboards
Group Elements - Organize page content using groups
Use Geometry - Create shapes and geometric elements for your pages
Use Text - Add and style text content on pages
Use Images - Import and work with images on pages

Document Structure and Context

Document API Concepts - Understanding the Adobe Express Document Object Model
Context API Reference - Current page, selection, and insertion context
PageNode API Reference - Detailed page node documentation
PageList API Reference - Page list management methods
Large Document Support - The active/inactive page model and why page content isn't always loaded
Support Large Documents - Visit pages, keep content active during async operations, and replace deprecated APIs

Advanced Topics

Create Renditions - Export specific pages or entire documents as images, PDFs, or videos
Handle Element Selection - Work with selected elements on pages

Manage Pages

Understanding Pages in Adobe Express

Add a Page

Example: Add a Standard Page

JavaScript

TypeScript

Example: Add Pages with Different Dimensions

JavaScript

TypeScript

Access Pages

Get the Current Page

JavaScript

TypeScript

Access All Pages

JavaScript

TypeScript

Working with Page Content

Add Content to a Specific Page

JavaScript

TypeScript

Work with Page Artboards

JavaScript

TypeScript

Common Patterns and Best Practices

Page Creation Workflow

JavaScript

TypeScript

Check Page Properties

JavaScript

TypeScript

Key Concepts & Best Practices

Important: Use the Correct Method

Important Behaviors

Integration with Other APIs

FAQs

Q: How do I add a page programmatically?

Q: Why doesn't createPage() work?

Q: How do I get the current page?

Q: How do I navigate between pages?

Q: What happens when I add a page?

Q: Can I remove pages?

Q: How do I access all pages in a document?

Q: What are the minimum requirements for a page?

Q: Can I read the content of every page at once?

Related Topics

Page Information and Metadata

Working with Page Content

Document Structure and Context

Advanced Topics