I'm having trouble integrating the Canva SDK editor (DesignButton) into a simple HTML page.
I want to locally test a button that opens the Canva editor via their SDK.
I have an index.html file with the SDK integrated via the CDN. I'm using Live Server (VS Code) to launch it locally.
The preview URL in Canva is http://localhost:5500/, which is supported in the Canva Dashboard Developer.
I'm trying to integrate the Canva DesignButton SDK into a basic HTML page using Live Server (localhost:5500).
I followed Canva’s official SDK documentation: https://www.canva.com/developers/docs/design-button/overview
I created a simple
index.htmlpage and added the SDK script like this:<script src="https://sdk.canva.com/designbutton/v2/api.js"></script>
I also initialized the button with:
Canva.DesignButton.initialize({
buttonSelector: "#canva-button",
appId: "my_app_id", // my app ID
designType: "Poster",
onDesignPublish: (design) => {
console.log("Design completed:", design.exportUrl);
},
});
Here is my HTML file:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Intégration Canva Editor</title>
<script src="https://sdk.canva.com/designbutton/v2/api.js"></script>
</head>
<body>
<h2>Test Canva Editor</h2>
<div id="canva-button"></div>
<script>
try {
Canva.DesignButton.initialize({
buttonSelector: "#canva-button",
appId: "my_app_id",
designType: "Poster",
onDesignOpen: () => {
console.log("Éditor Canva open");
},
onDesignPublish: (design) => {
console.log("Design ended:", design.exportUrl);
},
});
} catch (error) {
console.log("une erreur: ", error)
}
</script>
</body>
</html>
Problem: In Canva, when previewing, it says: "No server is listening."
In my browser, the page opens fine, but the Canva button doesn't appear at all.
Browser console: No visible SDK-related errors.
If I try with 127.0.0.1 or 192.168.x.x, Canva rejects the dev URL.
I tried embedding the Canva DesignButton SDK into a local HTML file using Live Server (VS Code). I expected the Canva button to appear and allow me to open the Canva editor in a pop-up window when I clicked it. Instead, the button doesn't appear at all, and in the Canva Developer Preview, I get the message "No server is listening." The page loads fine in my browser (http://localhost:5500), but nothing appears in the Canva SDK.
<div id="canva-button">Create</div>