createDesign

API reference for the JavaScript API's createDesign method.

Creates a new design in the Canva editor.

api.createDesign({
design: {
type: "Poster",
},
});
javascript
NameTypeRequiredDescription
optsobjectYesOptions for creating a new design in the Canva editor.
opts.designobjectYesOptions for the user's design.
opts.design.typeobjectYesThe type of design to create.
opts.design.dimensions.unitsstringNoThe unit of measurement for the height and width properties.
opts.design.dimensions.heightnumberNoThe height of the design. The unit of measurement is determined by the units property.
opts.design.dimensions.widthnumberNoThe width of the design. The unit of measurement is determined by the units property.
opts.design.titlestringNoThe 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.editorobjectNoOptions for the Canva editor.
opts.editor.publishLabelstringNoA label for the Publish button. This overrides the default value of "Publish".
opts.editor.fileTypestringNoA 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.onDesignOpenfunctionNoA function that runs when a user opens their design. For more information, see onDesignOpen.
opts.onDesignPublishfunctionNoA function that runs when the user publishes their design. For more information, see onDesignPublish.
opts.onDesignClosefunctionNoA function that runs when the user closes their design. For more information, see onDesignClose.

void

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canva Button</title>
<script src="https://sdk.canva.com/designbutton/v2/api.js"></script>
</head>
<body>
<button>Create a new design</button>
<script type="text/javascript">
(async () => {
if (!window.Canva || !window.Canva.DesignButton) {
return;
}
const api = await window.Canva.DesignButton.initialize({
apiKey: "API KEY GOES HERE",
});
const button = document.querySelector("button");
button.onclick = () => {
api.createDesign({
design: {
type: "Poster",
},
});
};
})();
</script>
</body>
</html>
markup