New in the Apps SDK: Page IDs + getCurrentPageMetadata

Announcements
,
1

We’re excited to announce that page IDs are now supported across multiple APIs in the Apps SDK, and that getCurrentPageMetadata is also now available. This release brings page identity to openDesign, getDesignMetadata, and addPage, making it much easier for apps to identify, track, and work with specific pages in a design.

What’s new

With this release:

  • getDesignMetadata returns page metadata for the design, including stable page IDs for supported pages.
  • addPage now returns page metadata for the page it creates, so apps can immediately work with the new page after creation.
  • openDesign now exposes the page ID on AbsolutePage, so apps editing a page can identify exactly which page they’re working with.
  • getCurrentPageMetadata provides metadata for the page the user is currently viewing, including its page ID.

Why it matters

These updates make page-aware workflows much simpler. Apps can now create a page, get its ID back, inspect page metadata across the whole design, and correlate that with the page currently being read or edited. For example you could create a new page using addPage, and then make further edits to that specific page using openDesign.

How to use it

import {
  addPage,
  getCurrentPageMetadata,
  getDesignMetadata,
  openDesign,
} from "@canva/design";

// Get metadata for the current page
const currentPage = await getCurrentPageMetadata();

if (currentPage.type === "absolute" && currentPage.id) {
  console.log("Current page ID:", currentPage.id);
}

// Get metadata for all pages in the design
const designMetadata = await getDesignMetadata();

for (const page of designMetadata.pageMetadata) {
  if (page.type === "absolute" && page.id) {
    console.log("Page:", page.id, page.title);
  }
}

// Create a new page and capture its metadata
const newPage = await addPage({ title: "Summary" });

if (newPage.type === "absolute" && newPage.id) {
  console.log("New page ID:", newPage.id);
}

// Read and edit the newly created page
await openDesign({ type: "all_pages" }, async (session) => {
  session.pageRefs.forEach((pageRef) => {
    session.helpers.openPage(pageRef, ({ page }) => {
      if (page.id === newPage.id) {
        console.log("Found matching Page ID for editing", page.id);
        // edit page
      }
    });
  });

  await session.sync();
});
2 Likes