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,
});
})();
js

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,
});
};
js

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,
});
})();
js

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,
});
})();
js

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

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