---
name: "send-to-canva"
description: "Send to Canva\nExport as an editable Canva design"
---
# Send to Canva

Export the current design to Canva as an editable design.

Canva imports a self-contained HTML file via URL. The flow is: confirm Canva is connected, bundle the design into a single HTML file, expose it at a public URL, then ask Canva to import from that URL.

## Process

1. **Confirm Canva is connected.** Search your available tools for a Canva import tool (e.g. `canva__create-design-import-job` or `canva__import-design-from-url`). If none is found, STOP — do not bundle anything yet. Tell the user to connect Canva via the Connectors panel (after connecting in the new tab, switching back to this tab picks it up automatically — no page reload needed), then ask again. Offer to prepare a downloadable self-contained HTML in the meantime (steps 3-4 below, then `present_fs_item_for_download` with `origin: 'canva_fallback'`).
2. **Identify the design file** the user wants to send (the currently open HTML file). Make sure it's visible in the user's preview surface per your selected harness reference.
3. **Prepare a copy for bundling.** Copy the design file to `export/src/`, along with any JSX it imports and any asset directories it references (images/, fonts/, styles — preserve the relative structure so HTML/CSS paths still resolve from the new location). The edits below rewrite resource references to `window.__resources`, which only exists in the bundled output, so editing the original would break the user's live design. In the copy: the bundler inlines resources referenced in HTML attributes and CSS, but it CANNOT discover URLs that only appear as strings in JS/JSX — React `<img src={url}>`, CSS-in-JS backgrounds, dynamically imported scripts, programmatic fetches. Read the copied design (inline scripts and any imported JSX) and for each such code-referenced asset add `<meta name="ext-resource-dependency" content="<url>" data-resource-id="<id>">` in `<head>`, then rewrite the code to use `window.__resources.<id>` in place of the hardcoded URL. Also add a `<template id="__bundler_thumbnail">` with a simple splash SVG if one isn't already present (the bundler rejects the file without it). Save the copy.
4. **Bundle** with `super_inline_html({ input_path: 'export/src/<design.html>', output_path: 'export/<name>.html' })`. Read the tool result: if it lists any assets it couldn't bundle ("asset not found: ..."), fix those references in the copy and re-run. Then preview the bundled output per your selected harness reference and check runtime/console errors before continuing.
5. **Get a public URL** for the bundled file with the `get_public_file_url` tool, passing `export/<name>.html`.
6. **Call the Canva import tool** found in step 1 with that URL. If the tool returns a job ID, poll the matching status tool until the import completes, then surface the resulting Canva design link to the user. If the call fails with a 4xx / auth error, do NOT re-bundle — tell the user to reconnect Canva and offer `present_fs_item_for_download` with `origin: 'canva_fallback'` on the already-bundled HTML as a fallback.

## Notes

- The public URL is short-lived; call the import tool immediately after getting it.
