@archstep/player

The embeddable, animated diagram renderer for ArchStep — React Flow + Framer Motion, driven by a compiled Step IR.

npm install @archstep/player @archstep/compiler react react-dom

import "@xyflow/react/dist/style.css"; // not bundled — see note below
import { compile } from "@archstep/compiler";
import { Player } from "@archstep/player";

const result = compile(stepSource);

function Diagram() {
  if (!result.ok) return null;
  return <Player ir={result.ir} scenarioName={result.ir.scenarios[0]?.name} autoPlay loop />;
}

Player also accepts onNodeMove (drag-to-reposition, patches the source text via @archstep/compiler's setNodePosition) — see Player.tsx for the full prop list.

Note: @xyflow/react/dist/style.css must be imported by your app, not this package — CSS imports from a workspace dependency aren't reliably picked up by every bundler without extra config (e.g. Next.js transpilePackages).

See the main README for the full pipeline.