API reference

List of HTML attributes for the Canva Button.

You can use HTML attributes to control the behavior and appearance of the Canva Button. Some of these attributes are always available, while Others are only available when creating a new design or editing an existing design. This page lists the HTML attributes and when they're available.
General attributes
These attributes are always available.
Name
Type
Required
Description
data-api-key
string
Yes
Your unique API key.
data-button-theme
string
No
The color theme of the button. The accepted values include default, light, and dark. The default value is default.
data-button-size
string
No
The size of the button. The accepted values include default, tiny, small, and large. The default value is default.
data-editor-file-type
string
No
The file type of 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.
data-editor-publish-label
string
No
A label for the Publish button. The default value is Publish.
data-on-design-close
string
No
The name of a JavaScript function. This function runs when the user closes their design. No parameters are passed to this function.
data-on-design-open
string
No
The name of a JavaScript function. This function runs when the user publishes opens a design. This includes when a user creates a new design or edits an existing design. This function receives the same parameters as the JavaScript API's onDesignOpen function.
data-on-design-open-input-design-id
string
No
The name of a form input element. When the user opens their design, the ID of the design is inserted into the input.
data-on-design-publish
string
No
The name of a JavaScript function. This function runs when the user publishes their design. This function receives the same parameters as the JavaScript API's onDesignPublish function.
data-on-design-publish-input-export-url
string
No
The name of a form input element. When the user publishes their design, the URL of the published design is inserted into the input. The URL is in the form https://export-download.canva.com/<export_file>. If you're using the China version of the SDK, the TLD is .cn instead of .com. You can take the necessary security measures to protect the URL from any malicious attacks.
data-on-design-publish-input-design-id
string
No
The name of a form input element. When the user publishes their design, the ID of the design is inserted into the input.
data-on-design-publish-input-title
string
No
The name of a form input element. When the user publishes their design, the title of the published design is inserted into the input.
Attributes for creating a new design
These attributes are only available when using the Canva Button to create a new design. You can't use these attributes in conjunction with the attributes for editing an existing design.
Name
Type
Required
Description
data-design-type
string
Yes
The type of design you want your users to create. For the complete list of supported values, see List of design types.
data-design-dimensions-height
number
No
The height of the design. The unit of measurement is determined by the data-design-dimensions-units attribute.
data-design-dimensions-units
string
No
The unit of measurement for the data-design-dimensions-height and data-design-dimensions-width attributes. The accepted values include cm, in, and px. The default value is px.
data-design-dimensions-width
number
No
The width of the design. The unit of measurement is determined by the data-design-dimensions-units attribute.
data-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.
For examples of how to use these attributes, see Create a new design with the HTML API.
Attributes for editing an existing design
These attributes are only available when using the Canva Button to edit an existing design. You can't use these attributes in conjunction with the attributes for creating a new design.
Name
Type
Required
Description
data-design-id
string
Yes
The ID of an existing design.
For examples of how to use these attributes, see Edit an existing design with the HTML API.

HTML - Previous

Customization

Next - JavaScript

Getting started

Last updated 2 months ago

Name	Type	Required	Description
`data-api-key`	string	Yes	Your unique API key.
`data-button-theme`	string	No	The color theme of the button. The accepted values include `default`, `light`, and `dark`. The default value is `default`.
`data-button-size`	string	No	The size of the button. The accepted values include `default`, `tiny`, `small`, and `large`. The default value is `default`.
`data-editor-file-type`	string	No	The file type of 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`.
`data-editor-publish-label`	string	No	A label for the Publish button. The default value is `Publish`.
`data-on-design-close`	string	No	The name of a JavaScript function. This function runs when the user closes their design. No parameters are passed to this function.
`data-on-design-open`	string	No	The name of a JavaScript function. This function runs when the user publishes opens a design. This includes when a user creates a new design or edits an existing design. This function receives the same parameters as the JavaScript API's onDesignOpen function.
`data-on-design-open-input-design-id`	string	No	The name of a form input element. When the user opens their design, the ID of the design is inserted into the input.
`data-on-design-publish`	string	No	The name of a JavaScript function. This function runs when the user publishes their design. This function receives the same parameters as the JavaScript API's onDesignPublish function.
`data-on-design-publish-input-export-url`	string	No	The name of a form input element. When the user publishes their design, the URL of the published design is inserted into the input. The URL is in the form `https://export-download.canva.com/<export_file>`. If you're using the China version of the SDK, the TLD is `.cn` instead of `.com`. You can take the necessary security measures to protect the URL from any malicious attacks.
`data-on-design-publish-input-design-id`	string	No	The name of a form input element. When the user publishes their design, the ID of the design is inserted into the input.
`data-on-design-publish-input-title`	string	No	The name of a form input element. When the user publishes their design, the title of the published design is inserted into the input.