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 (
PageNodeinPageList)- Artboards (
ArtboardNodeinArtboardList- timeline scenes)- Content (shapes, text, images, groups, etc.)
- Artboards (
- Pages (
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.
For more on the document scenegraph and node hierarchy, see the Document API Concepts Guide and Developer Terminology Guide.
Add a Page
Use the editor.documentRoot.pages.addPage() method to create a new page with specified dimensions.
Example: Add a Standard Page
Copied to your clipboard// sandbox/code.jsimport { 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 dimensionsconst newPage = editor.documentRoot.pages.addPage(pageGeometry);console.log("New page created:", newPage);console.log("Page dimensions:", newPage.width, "x", newPage.height);
Copied to your clipboard// sandbox/code.tsimport { 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 dimensionsconst newPage: PageNode = editor.documentRoot.pages.addPage(pageGeometry);console.log("New page created:", newPage);console.log("Page dimensions:", newPage.width, "x", newPage.height);
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
Copied to your clipboard// sandbox/code.jsimport { 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 pageconst landscapePage = editor.documentRoot.pages.addPage({width: 1920,height: 1080});console.log("Created 3 pages with different dimensions");
Copied to your clipboard// sandbox/code.tsimport { 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 pageconst 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
Copied to your clipboard// sandbox/code.jsimport { editor } from "express-document-sdk";// Get the currently active pageconst currentPage = editor.context.currentPage;console.log("Current page dimensions:", currentPage.width, "x", currentPage.height);console.log("Number of artboards:", currentPage.artboards.length);
Copied to your clipboard// sandbox/code.tsimport { editor, PageNode } from "express-document-sdk";// Get the currently active pageconst 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
Copied to your clipboard// sandbox/code.jsimport { editor } from "express-document-sdk";// Get all pages in the documentconst allPages = editor.documentRoot.pages;console.log("Total pages in document:", allPages.length);// Iterate through all pagesfor (const page of allPages) {console.log(`Page dimensions: ${page.width} x ${page.height}`);console.log(`Artboards in this page: ${page.artboards.length}`);}// Access specific pages by indexconst firstPage = allPages[0];const lastPage = allPages[allPages.length - 1];
Copied to your clipboard// sandbox/code.tsimport { editor, PageList, PageNode } from "express-document-sdk";// Get all pages in the documentconst allPages: PageList = editor.documentRoot.pages;console.log("Total pages in document:", allPages.length);// Iterate through all pagesfor (const page of allPages) {console.log(`Page dimensions: ${page.width} x ${page.height}`);console.log(`Artboards in this page: ${page.artboards.length}`);}// Access specific pages by indexconst firstPage: PageNode = allPages[0];const lastPage: PageNode = allPages[allPages.length - 1];
Working with Page Content
Add Content to a Specific Page
Copied to your clipboard// sandbox/code.jsimport { editor } from "express-document-sdk";// Create a new pageconst newPage = editor.documentRoot.pages.addPage({width: 1080,height: 1080});// The new page is automatically active, so content will be added to itconst 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");
Copied to your clipboard// sandbox/code.tsimport { editor, PageNode, StandaloneTextNode, ContainerNode } from "express-document-sdk";// Create a new pageconst newPage: PageNode = editor.documentRoot.pages.addPage({width: 1080,height: 1080});// The new page is automatically active, so content will be added to itconst 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
Copied to your clipboard// sandbox/code.jsimport { editor } from "express-document-sdk";// Get the current pageconst currentPage = editor.context.currentPage;// Access the page's artboardsconst artboards = currentPage.artboards;console.log("Number of artboards:", artboards.length);// Get the first (and typically only) artboardconst firstArtboard = artboards.first;console.log("First artboard dimensions:", firstArtboard.width, "x", firstArtboard.height);// Add content directly to a specific artboardconst rect = editor.createRectangle();rect.width = 200;rect.height = 200;rect.translation = { x: 50, y: 50 };firstArtboard.children.append(rect);
Copied to your clipboard// sandbox/code.tsimport { editor, PageNode, ArtboardList, ArtboardNode, RectangleNode } from "express-document-sdk";// Get the current pageconst currentPage: PageNode = editor.context.currentPage;// Access the page's artboardsconst artboards: ArtboardList = currentPage.artboards;console.log("Number of artboards:", artboards.length);// Get the first (and typically only) artboardconst firstArtboard: ArtboardNode = artboards.first!;console.log("First artboard dimensions:", firstArtboard.width, "x", firstArtboard.height);// Add content directly to a specific artboardconst 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
Copied to your clipboard// sandbox/code.jsimport { editor } from "express-document-sdk";function createTemplatePages() {// Define common page sizesconst 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 templateconst pages = {};for (const [name, dimensions] of Object.entries(pageSizes)) {const page = editor.documentRoot.pages.addPage(dimensions);pages[name] = page;// Add a title to each pageconst 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 pagesconst templatePages = createTemplatePages();
Copied to your clipboard// sandbox/code.tsimport { editor, PageNode, RectangleGeometry, StandaloneTextNode } from "express-document-sdk";interface PageSizes {[key: string]: RectangleGeometry;}function createTemplatePages(): { [key: string]: PageNode } {// Define common page sizesconst 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 templateconst 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 pageconst 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 pagesconst templatePages = createTemplatePages();
Check Page Properties
For detailed page information including content analysis and print readiness, see the Page Metadata How-to Guide.
Copied to your clipboard// sandbox/code.jsimport { editor } from "express-document-sdk";function analyzeDocument() {const pages = editor.documentRoot.pages;console.log("=== Document Analysis ===");console.log(`Total pages: ${pages.length}`);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}`);console.log(` Artboards: ${page.artboards.length}`);// Count content in each artboardfor (let j = 0; j < page.artboards.length; j++) {const artboard = page.artboards[j];console.log(` Artboard ${j + 1}: ${artboard.children.length} items`);}}}// Analyze the current documentanalyzeDocument();
Copied to your clipboard// sandbox/code.tsimport { editor, PageList, PageNode, ArtboardNode } from "express-document-sdk";function analyzeDocument(): void {const pages: PageList = editor.documentRoot.pages;console.log("=== Document Analysis ===");console.log(`Total pages: ${pages.length}`);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}`);console.log(` Artboards: ${page.artboards.length}`);// Count content in each artboardfor (let j = 0; j < page.artboards.length; j++) {const artboard: ArtboardNode = page.artboards[j];console.log(` Artboard ${j + 1}: ${artboard.children.length} items`);}}}// Analyze the current documentanalyzeDocument();
Key Concepts & Best Practices
Important: Use the Correct Method
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.insertionParentpoints 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.idwith 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.
Related Topics
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 (experimental)
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
Advanced Topics
- Create Renditions - Export specific pages or entire documents as images, PDFs, or videos
- Handle Element Selection - Work with selected elements on pages
