Most "animated diagram" solutions reach for a big hammer: a Canvas engine, a full animation library like GSAP, or an offline render that spits out an MP4. All three add weight, break text selection and accessibility, and turn your diagram into an opaque blob. Markdy takes the opposite approach — it animates real DOM and SVG with the Web Animations API (WAAPI) and CSS transforms.

What "browser-native" buys you

Tiny footprint. The parser and renderer are small and dependency-light — no Canvas runtime, no GSAP core.
Seekable and scrubbable. Every animation is driven by a single timeline, so play(), pause(), and seek() work in any direction.
Accessible and inspectable. Nodes are real elements with real text — selectable, translatable, and visible to crawlers.
Embeddable anywhere. It's just a DOM subtree, so it drops into any web page, Astro island, or MDX block.

How the renderer works

Markdy splits parsing from rendering. @markdy/core compiles your text into a render plan: positioned nodes, routed edges, and a schedule of timed cues. @markdy/renderer-dom then builds DOM nodes and an SVG edge layer and drives them with WAAPI:

import { createDiagram } from "@markdy/renderer-dom";

const diagram = createDiagram({
  container: document.getElementById("scene"),
  code: `
    scene "Request" theme=paper
    browser Web
    service API
    beat main:
      show $nodes
      Web -> API "GET /users"
  `,
});

diagram.seek(1.2); // scrubbing just works

Because playback is a controlled timeline rather than fire-and-forget CSS keyframes, you get reliable seeking and a progress bar for free — the same machinery that powers the playground scrubber.

A GSAP or Framer Motion alternative?

Not exactly — GSAP and Framer Motion are general-purpose UI animation frameworks. Markdy is narrower and higher level: it's for animated architecture and system diagrams specifically. If your goal is a labeled, narrated diagram of a request path or a deploy pipeline (not a bespoke UI interaction), Markdy gets you there in a few lines of text instead of imperative animation code. Seeanimated diagrams as code for the authoring model.

Where it shines

Docs sites, launch posts, onboarding flows, and architecture reviews — anywhere a lightweight, in-page animation beats a heavy video embed. Pair it with Astro and MDX to lazy-load scenes only when they scroll into view.