Create interactive designs with Canva Code
Canva Code lets you create responsive, interactive designs without the technicality of writing code. You can use Canva Code in two ways:
- Create interactive Code designs
- Create full interactive designs like landing pages, dashboards, or portfolios, and edit and publish as websites in the Canva Editor
- Add interactive Code elements to your designs
- Create interactive elements like quizzes, calculators, or charts to another design and reuse it across multiple designs
Tips:
- Learn more about how this feature counts toward your AI usage.
- Learn how to write better prompts to maximize your AI allowance.
Create interactive Code designs
Use the Code design type when you want to build a complete interactive experience.
- Create landing pages, dashboards, portfolios, and more
- Edit and refine in the Canva editor
- Publish as a responsive website
- From the Canva homepage, select Code. This opens the Canva editor.
- In the Canva editor, start by describing your design in the Canva AI tab. Prompt something like “Design an interactive user-friendly exercise tracker.”
- Alternatively, on the Templates tab you can also browse or search for templates to start from.
- Refine it using Canva AI or direct edits. See Edit your interactive Canva Code designs and elements to learn how.
Add interactive Code elements to your designs
Go to Canva AI then, Code when you want to generate a single interactive component.
- Create quizzes, calculators, charts, and more as elements.
- Add them to Presentations, Whiteboards, or other design types. Publish as a website or Reuse elements across multiple designs.
- In the Canva homepage, select Canva AI.
- In the Prompt box, describe the interactive Code element you’d like to create. Learn more about AI prompting here.
- Select </> Code.
- Press enter on your keyboard or click the submit button. Canva AI prepares your design based on your prompt.
- After generating the code design, select Use in a design.
- Under Add as an element to, select a doctype to add it as an interactive Code element.
- To improve the Canva Code-generated design, prompt your refinements in the chat box in the side panel.
Note: You can access the design versions form your chat thread with Canva AI.
Edit your interactive Canva Code-generated designs and elements
Refine your Canva Code-generated design using the tools in the editor. Check out Edit interactive Canva Code-generated designs and elements to learn more.
Preview and publish your design
Select Preview to interact with your design. Once everything looks good, you can publish it as a website. Learn how to publish and manage Canva Code websites.
Note: Interactivity works when the design is viewed on Canva or published as a website.
Access, copy, and manage Canva Code versions
Each time you update your Canva Code design through prompting, Canva automatically saves a new version within the same chat thread. This allows you to revisit earlier iterations, continue editing from a previous version, or copy the generated code for external use.
View your version history
- From the Canva homepage, open Canva AI.
- Under the Prompt bar, select </> Code to view your Canva Code chats in the sidebar.
- Note: You can identify Canva Code chats by the </> icon next to them.
- Open a Canva Code chat thread.
- In the sidebar, browse the available versions (for example: Version 1, Version 2, and more).
Note: Continuing to prompt within the same chat automatically creates a new version.
Use a previous version
- Open the Canva Code chat thread.
- Select the version you want to use.
- Select Use in a design to continue editing that version in Canva.
View and copy the code
You can view the underlying code generated by Canva Code and copy it for reuse outside Canva.
- In your Canva Code thread, turn on the Show code toggle.
- Select Copy code to save it to your clipboard.
Canva Code limitations
- Canva Code supports all languages available on Canva, except for users in canva.cn.
- Canva Code will only take instructions from the description you entered or used. The more context and instruction you give, the better the result will be.
- Code can be copied and reused externally, but can't be exported as a file or directly edited within Canva.
Can I reuse the code outside Canva?
Yes. Once copied, the code can be used in your own projects. While it’s built for Canva, you can adapt it for external tools or workflows.
Can I use my creations from Canva Code for commercial use?
As between you and Canva and to the extent permitted by law, you own your Input and Output to our AI features (including Canva Code, and the created Canva Codes), and Canva won't make any copyright ownership claim over your Input or Output (including created Canva Codes). For more details and full terms, please refer to our AI Product Terms.
Who can see what I create with Canva Code?
Only you can see your conversations with Canva Code. When you click Use in a design, a new design with that version is created, and you can share the design (including the Canva Code) using the Share button.
If you publish your design to a website, then access control is controlled by the settings you configure during the website publishing flow.
Can I manage my team’s access to Canva Code?
If you're an admin, teacher, or brand designer, you can choose who can access Canva Code in your team or class.
Can’t find Canva Code on your homepage? Know more about Canva Code access restrictions.
Why don’t I see lines of code changing?
Canva Code now uses diff-based editing, meaning only the necessary lines of code are updated instead of regenerating the entire block. This results in faster feedback when you're making small changes to your design logic.
If you don’t see the code lines changing after sending the prompt, it means Canva is working in the background to apply only the necessary changes. Please wait for Canva Code to finish generating another version.
Was this helpful?
Helpful
Unhelpful