codeanimate.dev
DOCS·2 MIN

Quickstart

Quickstart: your first shareable code animation in 2 minutes

The fastest path from "I have some code" to "there's an animated typing demo playing on my docs site / README / Slack message / blog post."

1 · Open the editor

Go to /editor. The editor loads with a sample Python snippet.

2 · Paste your code

Paste into the source pane on the left. Pick the language (auto-detected from the filename extension if you rename the file) and a theme you like. Adjust typing speed with the slider until it reads well.

3 · Preview the animation

Click the play button in the bottom bar. If it looks right, you're ready.

4 · Share it

Export & Share has two copy actions:

  • Copy link → https://codeanimate.dev/p/<id>. Paste into Slack, X/Twitter, LinkedIn, Discord — they unfurl into a preview card showing the first frame of your animation + title.
  • Copy embed → ![name](https://codeanimate.dev/api/embed/<id>.svg). Paste into a README, a docs page, Notion, or any Markdown surface; the animation plays inline.

Both actions save the snippet to your dashboard — rename, track hits, delete anytime. (Pro tier.)

5 · Paste anywhere

The URL is permanent. Drop it into your README, commit, push — GitHub renders it immediately. Paste it into a Slack message — the preview card shows up in seconds. Works identically on VSCode markdown preview, Read the Docs, MkDocs, Notion, any platform that renders remote images.

What just happened?

The share codec compressed your entire composition (code, language, theme, timing, layout) into a ~1 KB URL-safe string and embedded it in the query params of our /api/render endpoint. When GitHub fetches the image, our Cloudflare Worker decompresses the string, runs the animation renderer, and streams back a ~10 KB animated SVG.

Because the URL is deterministic, the result is cached at the edge — the second viewer pays zero compute cost.

Next steps