addPage

API reference for the addPage method.

This version of the API is deprecated. This version will soon be unsupported. You should use a stable version of the API in your app.

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

Scopes

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

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.

If this array is provided, it must contain at least one element.

The expected parameters for an element object depend 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>