Pages API

The sdk.pages namespace lets you manage pages in the design — create new ones, update SEO settings, duplicate, and navigate.

Reading pages

getAll()

Returns all pages in the design (excluding the internal master page).

const pages = sdk.pages.getAll();
for (const page of pages) {
  console.log(page.name, page.url);
}

getById(id)

Returns a single page by ID.

const page = sdk.pages.getById('page-1');

getCurrent()

Returns the page currently active in the builder.

const current = sdk.pages.getCurrent();
if (current) {
  console.log(`Editing: ${current.name}`);
}

getChildren(parentId)

Returns child pages of a parent (for nested page structures).

const subpages = sdk.pages.getChildren('page-1');

getFullPath(pageId)

Returns the full URL path by traversing the parent chain.

const path = sdk.pages.getFullPath('page-5');
// e.g., "/blog/my-post"

Creating pages

create(name, options?)

Creates a new page with a desktop viewport. Returns the created page.

// Simple page
const page = sdk.pages.create('About');
 
// Page with specific URL
sdk.pages.create('Blog Post', { url: '/blog/my-post' });
 
// Nested page
sdk.pages.create('Pricing FAQ', { parentId: 'page-3' });
 
// Page with multiple viewports
sdk.pages.create('Landing', {
  viewports: ['desktop', 'tablet', 'mobile'],
});
 
// 404 page
sdk.pages.create('Not Found', { is404: true });

Options:

url — string — Custom URL path (auto-generated from name if omitted)
parentId — string — Parent page ID for nested pages
viewports — string[] — Viewports to create: desktop, tablet, mobile
is404 — boolean — Mark as 404 page
isLoading — boolean — Mark as loading page

Modifying pages

rename(pageId, newName)

Renames a page and auto-updates its URL slug.

sdk.pages.rename('page-2', 'Our Services');
// URL becomes /our-services

update(pageId, updates)

Updates any page property — SEO fields, custom code, transitions, etc.

// Set SEO metadata
sdk.pages.update('page-1', {
  seoTitle: 'Home | My Website',
  metaDescription: 'Welcome to our website',
});
 
// Add custom code
sdk.pages.update('page-1', {
  headerCode: '<link rel="preconnect" href="https://fonts.googleapis.com">',
  bodyCode: '<script>console.log("loaded")</script>',
});
 
// Set page transition
sdk.pages.update('page-1', {
  pageTransition: 'fade',
});

duplicate(pageId)

Duplicates a page with all its content (nodes, variants, instances). Returns the new page.

const copy = sdk.pages.duplicate('page-1');
if (copy) {
  sdk.pages.rename(copy.id, 'Home V2');
}

Deleting pages

delete(pageId)

Deletes a page, its child pages, and all associated content. Cannot delete the home page.

sdk.pages.delete('page-5');

Navigation

navigateTo(pageId)

Switches the builder to a different page.

sdk.pages.navigateTo('page-2');

Page transitions

Set the pageTransition field to one of these presets: none, fade, slide-left, slide-right, slide-up, slide-down, wipe, circle-in, circle-out, inset, zoom-in, zoom-out, flip-x, flip-y, blinds-horizontal, blinds-vertical.

sdk.pages.update('page-1', {
  pageTransition: 'slide-left',
});

Page data shape

id — string — Unique identifier
name — string — Page name
url — string — URL path
order — number — Sort order
parentId — string — Parent page ID (for nested pages)
is404 — boolean — Whether this is a 404 page
seoTitle — string — SEO title tag
metaDescription — string — Meta description
ogImage — string — Open Graph image URL
headerCode — string — Custom code injected into the page head
bodyCode — string — Custom code injected into the page body
pageTransition — string — Transition preset name

Example: Page scaffolder

A plugin that creates a set of pages for a standard website:

export default definePlugin({
  name: 'Page Scaffolder',
  description: 'Create standard website pages',
  controls: {
    pages: {
      type: 'select',
      label: 'Template',
      default: 'business',
      options: [
        { label: 'Business Site', value: 'business' },
        { label: 'Portfolio', value: 'portfolio' },
        { label: 'Blog', value: 'blog' },
      ],
    },
  },
  run(values, sdk) {
    const templates: Record<string, string[]> = {
      business: ['About', 'Services', 'Contact'],
      portfolio: ['Work', 'About', 'Contact'],
      blog: ['Blog', 'About', 'Contact'],
    };
 
    const pageNames = templates[values.pages] || [];
 
    for (const name of pageNames) {
      const page = sdk.pages.create(name);
      sdk.pages.update(page.id, {
        seoTitle: `${name} | My Website`,
      });
    }
  },
});