Embedding remaid

1. Export from the editor

The simplest path. Build your diagram in the editor at remaid.dev, click SVG in the export menu, and drop the file anywhere a browser can render it. The SVG carries its own SMIL animation — no JavaScript needed.

<!-- in any HTML page or markdown -->
<img src="./checkout.svg" alt="Checkout flow" />

PNG export

Use PNG from the export menu when the destination does not support SVG (some content-management systems, social previews, README badges on platforms that strip animation). Note that PNG is a single frame — animation is lost. The renderer captures the diagram in its at-rest state.

WebM export

For destinations that allow video but not SVG (Twitter, LinkedIn, product launch tweets), use WebM. The editor records one full loop of the scene at 30fps and downloads it. The file is small for diagram-class content, and Chrome/Firefox/Safari all play it natively.

2. As a React component

Install @remaid/react from npm and render diagrams from a source string. This is the right choice for documentation sites built with Next.js, Astro, or Docusaurus where you want the source to live in your repo and update with your code.

bun add @remaid/react

// or with npm/pnpm/yarn
npm install @remaid/react

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

const SOURCE = `
  diagram "Checkout" {
    node web { kind: client }
    node api { kind: service }
    edge req: web -> api

    scene s {
      packet-flow req { speed: 600ms }
    }
  }
`;

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

The component renders an inline SVG, so the animation works the moment the page paints. Layout runs once on mount; for static-export sites you can pre-render the SVG at build time using the same render pipeline (see the next section).

3. Pre-render at build time

The renderer is a pure function. If your build system runs on Node (Next.js, Astro, Vite SSG), you can compile diagrams during the build and embed the SVG straight in HTML — no React, no hydration.

import { parse, layoutDiagram, renderSvgFull, getTheme } from "@remaid/core";

const result = parse(SOURCE);
if (!result.ok) throw new Error("invalid remaid source");

const layout = await layoutDiagram(result.diagram);
const { svg } = renderSvgFull(layout, getTheme(result.diagram.theme));

// Inject `svg` into your HTML output.

This is exactly how the docs site you are reading renders its example diagrams. Every animated SVG on these pages was produced at build time — the page ships with zero runtime cost beyond the SVG itself.

4. In Markdown / MDX

Most static-site generators with MDX support let you render React components inline. Drop a <RemaidDiagram source=... /> anywhere in your post.

For pure markdown (no MDX), export to SVG and reference it as a regular image:

![Checkout flow](./diagrams/checkout.svg)

5. GitHub READMEs

GitHub strips <script> from rendered Markdown but does render SVG with SMIL — animations work in READMEs. Commit the.svg file to your repo and reference it the same way as any other image.