Skip to main content

Canva home
Help

Edit interactive Canva Code designs and elements

If you've used Canva Code to create an interactive feature in your design like a quiz, calculator, or countdown, you can edit them directly in Canva.

Here’s how to edit Canva Code page or reusable elements.

Tips:

Edit your interactive Canva Code-generated page

Canva Code lets you refine both your content and interactions easily using a combination of direct editing and prompting with Canva AI.

  • You’ll be able to Edit most text, text formatting and images directly on the canvas. For layout sections, resizing, and styling, use Canva AI to make your changes.
  • You’ll also be able to Play and interact directly with your design to experience your page the way your audience will, so you can test interactions and flow in real time. Click to deselect any items you are editing to then interact with any buttons or fields.

Note: Not all design elements are directly editable due to the responsive structure. If there is an element you would like to edit but cannot select, then use the Canva AI tab to describe the change you’d like and submit your prompt.

  1. In the editor, select the page to edit.
  2. If all design elements are directly editable, you can:
    • Select and edit supported text
    • Adjust fonts, colors, and styling using the toolbar
    • Resize and reposition layout sections
  3. If something can’t be edited directly in the way you’d like, select it, then:
    1. Select
      Canva AI in the toolbar.
    2. Describe the change you want. For example, “switch chart to a dashboard” or “change labels to images.”
    3. You can also ask
      Canva AI to refine the entire page.
  4. To copy your design’s code, select Code, then Copy code.
  5. You can replace any media in the design with Photos and Graphics from Elements, or with your own content from Uploads. Drag and drop directly to replace images, then tap
    Replace from the toolbar.
  6. When prompting with Canva AI, you may attach uploads to reference in your prompt, for example, “update the design to a style like this”.
  7. You can also attach uploads to directly embed into your design, for example, “use this logo in the design”.
  8. Select
    to delete the page and start a new design.
  • “Change this across all designs” prompts don’t apply to Code designs. AI changes apply to one page at a time. Bulk updates across multiple designs aren’t supported.
  • AI updates only affect the page you’re currently editing. Changes don’t carry over to other Code pages.
  • Each page has its own, separate AI chat history.

Edit interactive elements

  1. Open a design that includes a Canva Code-generated element.
  2. Click on the interactive element to select it.
  3. In the toolbar that appears, select Edit. This opens the Edit panel, where you can:
    •  Add or change the title and subtitle.
    • Use the toggle switches to show the export button, search bar, and tag filters. Note: The options in the Edit panel may look different depending on what Canva Code has generated. Some buttons, like Export, Share, or Tag filter, may not always be available.
  4. To edit fonts and colors:
    • In the toolbar, select a color tile to open the color panel.  
    • In the color panel, choose your preferred color. The background and button colors will adjust automatically.
    • Select a font from the dropdown menu (including Brand Kit fonts) to apply it to the entire interactive element.
    • You can also increase or decrease the font size using the toolbar controls.
  5. Select the Animate button to add visual effects.
  6. Select the Position button to open the Arrange and Layers panel. Adjust the arrangement or layering of the Canva Code-generated interactive element alongside other elements in your design.

Can’t find Canva Code on your homepage? Know more about Canva Code access restrictions.

Next steps: Publish and manage Canva Code websites

Was this helpful?

Helpful

Unhelpful

People also viewed

Skip to end of footer

Skip to start of footer