Embed a code animation anywhere

Drop an animated, syntax-highlighted typing demo into any place that renders images or Open Graph previews — a GitHub README, a docs site, a blog post, a Notion page, a Slack or Discord message, a LinkedIn post, a PR description, a VSCode markdown preview.

Two URL shapes cover every surface. They're produced automatically when you click Share in the editor (Pro tier):

No JavaScript. No <video> tag. Just text + an animated SVG that renders everywhere images render.

Table of contents

1. Quickstart
2. Markdown vs HTML
3. Sizing
4. Platform compatibility
5. Two URL shapes: short vs hosted
6. Updating an embed
7. API keys & monthly quotas
8. Signed URLs (no key in Markdown)
9. Troubleshooting
10. Copy-paste snippets

Quickstart

1. Open the editor, paste your code, pick a theme.
2. Click Export & Share, then either:
   • Copy link → pastes a https://codeanimate.dev/p/<id> URL. Drop it into Slack, a tweet, a chat, anywhere a preview card is nice.
   • Copy embed → pastes Markdown: ![name](https://codeanimate.dev/api/embed/<id>.svg). Drop it into a README, a docs page, a blog post, Notion.
3. You'll also find the saved animation in your dashboard — rename, track hits, delete anytime.

The URL is permanent. The animation loops forever.

Markdown vs HTML

Both forms work. Use whichever is cleaner in the target file.

Markdown:

![hello.py](https://codeanimate.dev/api/embed/abc123.svg)

HTML (supported in GitHub README + most Markdown renderers):

<img src="https://codeanimate.dev/api/embed/abc123.svg"
     alt="hello.py"
     width="640" />

Use the HTML form when you need to constrain width, set align, or wrap the image in a link (<a href><img …/></a>).

Sizing

The SVG's intrinsic size matches the window you designed in the editor (including your stageWidth). To scale it in a README:

SVGs upscale without pixelation, so prefer width="640" (or whatever matches your content column) over exporting a larger PNG.

Platform compatibility

Legend: ✅ = animation plays · ⚠️ = renders but animation is frozen or stripped · ❌ = image doesn't render.

Two URLs, two purposes

Both reference the same underlying snippet (same <id>). The editor's Share menu gives you both with one click each.

Programmatic creation (Pro API key):

curl -X POST https://codeanimate.dev/api/snippets \
  -H "Authorization: Bearer ca_live_abc…" \
  -H "Content-Type: application/json" \
  -d '{"snapshot":{"code":"…","filename":"hello.py","themeId":"dark-plus", …}}'
# → { "id": "k9X3mQ8vN2...", "url": "…/api/embed/k9X3mQ8vN2.svg", "markdown": "…", "html": "…" }

Shell-friendly shortcuts — pick a single output format instead of JSON:

curl -X POST '…/api/snippets?output=url' -H "…" -d @snap.json       # just the URL
curl -X POST '…/api/snippets?output=markdown' -H "…" -d @snap.json  # Markdown to paste
curl -X POST '…/api/snippets?output=svg' -H "…" -d @snap.json -o a.svg  # the rendered SVG

The language field is optional. The API will try:

1. Filename extension (.py → python, .ts → typescript, .rs → rust, etc.)
2. Content-based heuristic (detects python, js, ts, go, rust, java, c/cpp, sql, html, css, json, yaml, bash, markdown from the code itself)

Pass language explicitly only when both fail or the detection would be ambiguous (e.g. your .js file actually contains JSX).

Updating an embed

Hosted URLs are content-addressable: the id is a hash of your composition. Edit the code, theme, or timing, and you get a new id and therefore a new URL. Nothing is "in place" editable — that's a feature: CDNs cache the old URL safely, readers of older doc versions see the old animation, and you control rollout by swapping one URL.

From the Snippets dashboard, click Copy Markdown on the new snippet and paste over the old URL.

API keys & monthly quotas

Embeds are free and anonymous up to a small monthly per-IP cap, which is plenty for a few personal READMEs. For production docs, a blog, or anything that might go viral, create an API key so renders count against your own plan:

1. Sign in at /dashboard/keys.
2. Click Create key, give it a name (e.g. README dogfood).
3. Copy the ca_live_… string — it's shown exactly once.
4. Append ?k=ca_live_… to every embed URL.

Monthly quotas:

When you hit your quota, the API returns a different SVG — a polite "quota reached" card — so the embed never breaks your page layout.

Signed URLs (no key in Markdown)

Some users prefer not to have an API key visible in a public README. A signed URL carries an HMAC instead:

![demo](https://codeanimate.dev/api/embed/k9X3mQ8vN2.svg?sig=…&exp=…)

Generate one from the key's settings page in the dashboard. The signature encodes your user id and an expiry; readers can still cache the image, but they can't use the URL beyond its expiry window.

Troubleshooting

"The animation isn't playing on GitHub." GitHub's Camo proxy caches very aggressively. After updating a snippet, append ?v=2 (or any cache-buster) to the URL in your README.

"Looks fine in the editor but broken on GitHub." Camo requires HTTPS + a valid Content-Type. Our API always sets those — if it still fails, check status.codeanimate.dev.

"Works in VSCode but not on GitHub (or vice versa)." Most often the viewer has Workspace Trust disabled, which blocks remote images entirely. The embed renders once you trust the workspace.

"I hit my quota mid-month." Upgrade to Pro for unlimited renders, or switch to the short-form /api/render?s=… URL which is rate-limited by IP rather than key.

"My code contains secrets — is this safe?" Hosted snippets are stored in our database. Don't paste API keys, tokens, or internal URLs into a public embed. The short-form URL encodes the code directly into the URL; it's equally public.

Copy-paste snippets

The ten most popular language/theme pairings, ready to adapt:

Open the editor with the corresponding preset, paste your code, and click Copy README embed.

See also: VSCode preview notes · API reference · Quickstart