Skip navigation
Skip to main content
Canva Developers logo
API reference

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.

NameTypeRequiredDescription
data-api-keystringYesYour unique API key.
data-button-themestringNoThe color theme of the button. The accepted values include default, light, and dark. The default value is default.
data-button-sizestringNoThe size of the button. The accepted values include default, tiny, small, and large. The default value is default.
data-editor-file-typestringNoThe 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-labelstringNoA label for the Publish button. The default value is Publish.
data-on-design-closestringNoThe name of a JavaScript function. This function runs when the user closes their design. No parameters are passed to this function.
data-on-design-openstringNoThe 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-idstringNoThe 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-publishstringNoThe 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-urlstringNoThe 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-idstringNoThe 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-titlestringNoThe 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.

NameTypeRequiredDescription
data-design-typestringYesThe type of design you want your users to create. For the complete list of supported values, see List of design types.
data-design-dimensions-heightnumberNoThe height of the design. The unit of measurement is determined by the data-design-dimensions-units attribute.
data-design-dimensions-unitsstringNoThe 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-widthnumberNoThe width of the design. The unit of measurement is determined by the data-design-dimensions-units attribute.
data-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.

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.

NameTypeRequiredDescription
data-design-idstringYesThe ID of an existing design.