Embedding in VSCode (and other Electron editors)

VSCode's Markdown preview (and its cousins — Cursor, Windsurf, Positron) is a Chromium renderer running inside Electron. Animated SVGs play reliably there, with a couple of caveats worth knowing before you rely on them in an extension README or a workspace doc.

What works

<img src="https://…svg"> with animated SVG — plays back at full fidelity.
PNG and GIF embeds — standard image behavior.
Our API's SMIL (<animate>) animation path — Chromium supports SMIL, so your embeds animate exactly as they do on GitHub.
Viewing README.md at the project root (Ctrl+Shift+V / Cmd+Shift+V).

What to watch out for

Workspace Trust

VSCode blocks all remote images in untrusted workspaces. If you open a folder for the first time and the preview is empty, check the trust banner at the top of the window:

⚠️ Restricted Mode — some features are disabled.

Click Manage Workspace Trust and trust the folder. Images appear immediately on the next preview refresh.

You can make this default with:

// .vscode/settings.json
{
  "security.workspace.trust.untrustedFiles": "open"
}

Marketplace extension READMEs

VSCode's Marketplace renders your extension's README.md through a stricter sanitizer than the in-editor Markdown preview. SVG animations are usually stripped there, so the animation freezes on the first frame when viewed on marketplace.visualstudio.com.

Workaround: for Marketplace-facing READMEs, prefer the .gif form:

![typing demo](https://codeanimate.dev/api/embed/abc.gif)

GIFs always render animated on Marketplace. Use SVG for your in-repo README.md (which gets rendered by the in-editor preview), and GIF for the Marketplace listing if you need both.

Offline previews

If you're working on a plane with no network, the <img> will fail to load and the preview shows a broken-image icon. Nothing we can do on the Camo / image-CDN end there — that's just how remote embeds work. Consider checking a local .svg or .gif into the repo next to your README as a fallback for offline viewers.

Known-good renderer versions

We spot-test each major release. Known to work out of the box:

VSCode ≥ 1.80 (all modern versions).
Cursor ≥ 0.40.
Windsurf ≥ 1.0.
Positron ≥ 2024.06.

Earlier Electron builds (< 2021) may show a frozen first frame due to older Chromium SMIL support.

Testing your embed

Fast feedback loop:

Open README.md (or any Markdown file) that contains your embed.
Ctrl+Shift+V / Cmd+Shift+V — opens the Markdown preview in a side panel.
Edit the source, save — preview re-renders live.

To force a fresh fetch (bypassing the local image cache), right-click the preview → Developer: Reload Preview.

Still not working?

File an issue with:

VSCode version (from Help → About).
OS + arch (macOS / Linux / Windows; x64 / arm64).
A snippet of the Markdown you're embedding.
Whether it renders on GitHub (to isolate whether it's a viewer vs API issue).

Back to the main embedding guide.

VSCode preview