addPage

API reference for the addPage method.

Adds a new page to the design. The new page is added immediately after the currently selected page.

Usage

Basic usage

import { Button } from "@canva/app-ui-kit";
import { addPage } from "@canva/design";

export function App() {
  async function handleClick() {
    await addPage();
  }

  return <Button onClick={handleClick}>Add page</Button>;
}

tsx

Setting a title for the new page

import { Button } from "@canva/app-ui-kit";
import { addPage } from "@canva/design";

export function App() {
  async function handleClick() {
    await addPage({
      title: "Hello world",
    });
  }

  return <Button onClick={handleClick}>Add page</Button>;
}

tsx

Setting a background for the new page

import { Button } from "@canva/app-ui-kit";
import { addPage } from "@canva/design";

export function App() {
  async function handleClick() {
    await addPage({
      background: {
        color: "#ff0099",
      },
    });
  }

  return <Button onClick={handleClick}>Add page</Button>;
}

tsx

Including elements on the new page

import { Button } from "@canva/app-ui-kit";
import { addPage } from "@canva/design";

export function App() {
  async function handleClick() {
    await addPage({
      elements: [
        {
          type: "TEXT",
          children: ["Hello world!"],
          width: 100,
          height: "auto",
          top: 0,
          left: 0,
        },
      ],
    });
  }

  return <Button onClick={handleClick}>Add page</Button>;
}

tsx

Permissions

Before an app that uses this method can be submitted for review, the canva:design:content:write permission must be enabled via the Developer Portal. To learn more, see Configuring permissions.

Rate limit

This method has a rate limit of 3 requests every 10 seconds.

Parameters

#optionsobject

Optional

The options for configuring the new page.

#options.backgroundobject

Optional

The background of the page, such as an image, color, or video. This property accepts the same options that are passed into the setCurrentPageBackground method.

#options.elementsarray

Optional

An array of elements to pre-populate on the new page.

#options.elements[0]object

Required

An individual element object to add to a new page.

The expected parameters for an element object depends on the type of element being added. For the expected parameters, see the parameters for the addNativeElement method.

#options.titlestring

Optional

A human readable title for the new page. It must not exceed 255 characters.

Returns

Promise<void>