createDesign

Search…
createDesign
API reference for the JavaScript API's createDesign method.
Creates a new design in the Canva editor.
Usage
1
api.createDesign({
2
  design: {
3
    type: "Poster",
4
  },
5
});
Copied!
You must initialize the SDK before calling the createDesign function.
Parameters
Name
Type
Required
Description
opts
object
Yes
Options for creating a new design in the Canva editor.
opts.design
object
Yes
Options for the user's design.
opts.design.type
object
Yes
The type of design to create.
opts.design.dimensions.units
string
No
The unit of measurement for the height and width properties.
opts.design.dimensions.height
number
No
The height of the design. The unit of measurement is determined by the units property.
opts.design.dimensions.width
number
No
The width of the design. The unit of measurement is determined by the units property.
opts.design.title
string
No
The title of the design. The default title is Untitled design. The title is used in the exported design's filename. Users can change the title later in the Canva editor.
opts.editor
object
No
Options for the Canva editor.
opts.editor.publishLabel
string
No
A label for the Publish button. This overrides the default value of "Publish".
opts.editor.fileType
string
No
A file type for the exported design. The accepted values include png, pdf, jpeg, and jpeg. The ability to export designs as mp4 and gif is an invite-only feature. The default value is png.
opts.onDesignOpen
function
No
A function that runs when a user opens their design. For more information, see onDesignOpen.
opts.onDesignPublish
function
No
A function that runs when the user publishes their design. For more information, see onDesignPublish.
opts.onDesignClose
function
No
A function that runs when the user closes their design. For more information, see onDesignClose.
Returns
void
Example
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Canva Button</title>
7
    <script src="https://sdk.canva.com/designbutton/v2/api.js"></script>
8
  </head>
9
  <body>
10
    <button>Create a new design</button>
11
    <script type="text/javascript">
12
      (async () => {
13
        if (!window.Canva || !window.Canva.DesignButton) {
14
          return;
15
        }
16
​
17
        const api = await window.Canva.DesignButton.initialize({
18
          apiKey: "API KEY GOES HERE",
19
        });
20
​
21
        const button = document.querySelector("button");
22
​
23
        button.onclick = () => {
24
          api.createDesign({
25
            design: {
26
              type: "Poster",
27
            },
28
          });
29
        };
30
      })();
31
    </script>
32
  </body>
33
</html>
Copied!
JavaScript - Previous
API reference
editDesign
Last modified 5mo ago
Copy link
Contents