Embeds on the canvas

An embed turns a URL into a live, interactive iframe living on the canvas. Drop a YouTube link and the video plays; drop a Figma frame and you can pan and zoom inside it; drop a tweet and the formatted post renders inline. Embeds are the same first-class shape as a rectangle or a sticky note — you can resize, move, group, frame, and lock them, and they get saved with the rest of the scene. This page covers the supported providers, how each one is sized, the sandbox model that keeps your canvas safe, and how a workspace owner can switch embeds off entirely.

How to add an embed

Three routes get you there:

1. Drag a URL onto the canvas. Grab the padlock from your browser’s address bar, or drag a hyperlink from a webpage, and drop it where you want the embed to land. CorriDraw inspects the URL and inserts the matching embed.
2. Paste a URL. Copy the URL, click on the canvas, then right-click and choose Paste (or use Ctrl+V). Same recognition logic as drag-and-drop.
3. Use the Web Embed tool. Click the extra-tools icon on the toolbar and pick Web Embed. Drag a rectangle on the canvas to size the embed, then paste the URL into the dialog that appears.

Screenshot pending

The Web Embed dialog open with a YouTube URL pasted in and a live preview rendering on the right

/screenshots/docs/embeds-1.png

Supported providers

CorriDraw recognises a curated list of providers. The provider list is the source of truth — a URL must match one of these to render as an embed; everything else either becomes a hyperlink (if it’s a plain link) or is rejected by the validator (in the Web Embed dialog).

• YouTube — youtube.com/watch, youtu.be, youtube.com/shorts, embed and playlist URLs. Honours the ?t= timestamp parameter.
• Vimeo — vimeo.com/<id> and player URLs.
• Figma — any figma.com file or prototype link, rendered through the official embed endpoint.
• GitHub Gist — gist.github.com/<user>/<id>, rendered as a syntax-highlighted code block.
• X / Twitter — status URLs on either twitter.com or x.com, rendered as a formatted tweet via the Twitter embed widget.
• Reddit — reddit.com/r/<sub>/comments/… URLs, rendered as a formatted post via Reddit’s embed widget.
• Giphy — giphy.com/clips, giphy.com/embed, giphy.com/gifs.
• Val.town — val.town/v/… and val.town/embed/…, rendered as a runnable val.
• Microsoft Forms — forms.microsoft.com URLs, rendered with the embed query flag set automatically.
• Google Drive video — drive.google.com/file/d/<id> links to video files, rendered through the Drive preview endpoint.
• StackBlitz and SimplePDF — supported as direct iframe sources for project URLs and PDF previews respectively.

Screenshot pending

A canvas with six different embeds — a YouTube video, a Figma frame, a tweet, a Gist, a Giphy clip, and a Microsoft Form — laid out in a grid

/screenshots/docs/embeds-2.png

Per-provider intrinsic sizing

When CorriDraw inserts an embed it picks an aspect ratio that matches the provider’s native content. You can resize freely afterwards, but the default sizing means the embed looks right the moment it appears:

• YouTube (regular and embed/playlist) — 560 × 315 (16:9 video).
• YouTube Shorts — 315 × 560 (9:16 portrait).
• Vimeo — 560 × 315 (16:9 video).
• Google Drive video — 560 × 315.
• Figma — 550 × 550 (square, suits both files and prototypes).
• GitHub Gist — 550 × 720 (tall, code-friendly).
• X / Twitter and Reddit — 480 × 480 (the embed widgets size their own content inside).
• Everything else (Giphy, Val.town, Microsoft Forms, generic) — 560 × 840 default, intended to be resized to taste.

If the default proportions are wrong for what you need, drag any corner handle to resize. To snap back to the provider’s default, right-click the embed and choose Reset to original size.

Sandboxed iframes — the security model

Every embed renders inside a sandboxed iframe. The browser, not CorriDraw, enforces the sandbox: an embed cannot read your CorriDraw cookies, cannot script the parent page, cannot pop up dialogs across the canvas, cannot navigate the top-level window away. The default sandbox flags grant the iframe enough capability to play media, run scripts inside its own document, and submit forms — but nothing more.

A small allow-list of providers gets one extra capability: allow-same-origin. This is required for OAuth-based embeds (Figma, Google Drive video, Vimeo) to render the file you actually have access to. The list is hard-coded into CorriDraw and currently covers YouTube, Vimeo, Google Drive, Figma, X/Twitter, Reddit, StackBlitz, SimplePDF, and Microsoft Forms. Everything else stays in the strictest cross-origin sandbox.

Screenshot pending

Browser DevTools showing the sandbox attribute on a CorriDraw embed iframe, with allow-scripts, allow-popups, and (for the trusted provider) allow-same-origin

/screenshots/docs/embeds-3.png

An embed never auto-loads its content while the canvas is just sitting there. The first time you actually need to interact with the iframe — to play the video, click into the form, scroll the gist — CorriDraw shows a small Click to interact overlay. Click it once and the iframe activates. This keeps the canvas responsive (no fifty live YouTube players hammering the network) and gives you a chance to decide whether you really want to load the third-party content.

Editing the link of an existing embed

Click the embed to select it, then click the link icon in the floating action bar that appears above it. The element-link panel opens; paste a new URL and confirm. CorriDraw re-validates the URL against the supported-providers list and re-renders the iframe. The embed’s position, size, rotation, and grouping survive the swap.

Disabling embeds at the workspace level

Workspace owners can switch embeds off — globally, or scoped to a single host allow-list. There are two paths, both reachable from the dashboard:

1. From the dashboard sidebar, click Workspace settings on the workspace you want to configure.
2. Click the Security & embeds tab.
3. Choose one of:
   • All providers allowed — the default. The full curated list above renders.
   • Allow-list — type the hostnames you want to permit (one per line). Only those will render as embeds; everything else falls back to a plain hyperlink.
   • Embeds disabled — URLs always become hyperlinks. No third-party iframes are ever inserted.
4. Click Save. The change applies to every diagram in the workspace immediately, including ones already open in other tabs (they refresh on the next reconnect).

Screenshot pending

The Workspace settings → Security & embeds tab, showing the three radio options and the host allow-list textarea

/screenshots/docs/embeds-4.png

Under the hood, the workspace setting becomes the validateEmbeddable prop on the embedded editor. CorriDraw asks the prop to vet every URL before rendering an iframe; if the prop says no, the URL falls through to plain-hyperlink behaviour. The same prop is also available on the SDK, so self-hosted deployments can wire it directly into their own policy engine.

What does not work as an embed

If a URL is not on the supported list, you have three reasonable options:

• Drop it on the canvas anyway — it becomes a clickable link element with the URL as the label.
• Take a screenshot of the destination page and paste it as an image. Annotate over the top with arrows and text.
• If you control the workspace and you trust the source, ask your workspace owner to add the host to the allow-list. Anything that loads in a sandboxed iframe will then work.

The curated list exists because each provider needed individual work — URL parsing, embed-endpoint translation, sensible default sizing, sandbox tuning. New providers land regularly; if there is a service you would like to see supported, the feedback form is the right place to flag it.