@rexymayderio/remaid-react

React component for remaid — animated architecture diagrams as code.

bun add @rexymayderio/remaid-react

import { RemaidDiagram } from "@rexymayderio/remaid-react";

const SOURCE = `
  diagram "Hello" {
    node web { kind: client }
    node api { kind: service }
    edge req: web -> api
    scene s {
      packet-flow req { speed: 600ms }
    }
  }
`;

export default function Page() {
  return <RemaidDiagram source={SOURCE} />;
}

The animation runs as native SMIL inside the SVG — no JavaScript needed once the page is loaded. Diagrams respect prefers-reduced-motion: reduce automatically.

Pre-render at build time

import {
  parse,
  layoutDiagram,
  renderSvgFull,
  getTheme,
} from "@rexymayderio/remaid-react";

const result = parse(SOURCE);
if (!result.ok) throw new Error("invalid source");
const layout = await layoutDiagram(result.diagram);
const { svg } = renderSvgFull(layout, getTheme(result.diagram.theme));

// In the page:
<RemaidDiagram source={SOURCE} prerendered={svg} />;

License

Apache 2.0.