Edit designs

After a user creates a design, they may want to edit the design later. To enable this, Canva provides a My Designs carousel in the product catalog and an ID for each design.

Partners can enable the My Designs carousel to show and reopen a design from the product catalog. Partners can use the design ID to reopen a design by directly launching the Canva editor.

This page explains how to reopen and edit a design.

The catalog-to-editor path lets you show and reopen a design from the My Designs carousel of the product catalog.

A product catalog doesn't show the My Designs carousel by default. You must enable the carousel.

To enable the carousel, use the onDesignSelect callback in the showCatalog method.

(async () => {
  const api = await Canva.Partnership.initialize({
    apiKey: "<partner_api_key>",
    autoAuthToken: "<auto_auth_token>",
    container: document.getElementById("container"),
  });

  const onDesignSelect = (opts) => {
    console.log(opts);
  };

  api.showCatalog({
    onDesignSelect,
  });
})();

The onDesignSelect callback passes information about the design a user selects, including the design ID.

At this point, users can see their designs in the My Designs carousel, but can't reopen a design in the Canva editor yet.

When a user selects a design in the My Designs carousel, you must reopen the design in the Canva editor. This lets a user edit their design.

To reopen a design, in the onDesignSelect callback, call the editDesign method and pass the design ID.

const onDesignSelect = (opts) => {
  api.editDesign({
    ...opts,
    designId: opts.designId,
  });
};

The direct-to-editor path lets you reopen a design by directly launching the Canva editor.

Canva provides the design ID when:

• A user creates a new design.
• Canva generates the artworks for a design.

You can save the design ID locally or to a datastore. You can later use the design ID to reopen a design.

To get the design ID when a user creates a design, use the onDesignOpen callback in the createDesign method.

(async () => {
  const api = await Canva.Partnership.initialize({
    apiKey: "<partner_api_key>",
    autoAuthToken: "<auto_auth_token>",
  });

  const onDesignOpen = (opts) => {
    console.log(opts);
  };

  api.createDesign({
    partnerProductId: "Poster11x17in",
    designSource: "direct",
    onDesignOpen,
  });
})();

To get the design ID when Canva generates the artworks for a design, use the onMultiArtworkCreate method in the createDesign method.

(async () => {
  const api = await Canva.Partnership.initialize({
    apiKey: "<partner_api_key>",
    autoAuthToken: "<auto_auth_token>",
  });

  const onMultiArtworkCreate = (opts) => {
    opts.artworks.forEach((artwork) => {
      console.log(artwork);
    });
  };

  api.createDesign({
    partnerProductId: "Poster11x17in",
    designSource: "direct",
    onMultiArtworkCreate,
  });
})();

To reopen a design, call the editDesign method and pass the design ID.

api.editDesign({
  designId: "DESIGN ID GOES HERE",
});