Excalidraw Has a Free API That Most Developers Don't Know About

Excalidraw is the popular whiteboard tool, but most developers do not realize it has a powerful embeddable React component and a programmatic API.

Embed Excalidraw in Your App

npm install @excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

function Whiteboard() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw
        onChange={(elements, state) => {
          console.log("Elements:", elements);
          saveToDatabase(elements);
        }}
        initialData={{
          elements: loadedElements,
          appState: { viewBackgroundColor: "#ffffff" }
        }}
      />
    </div>
  );
}

Programmatic Element Creation

import { convertToExcalidrawElements } from "@excalidraw/excalidraw";

const elements = convertToExcalidrawElements([
  {
    type: "rectangle",
    x: 100, y: 100,
    width: 200, height: 100,
    backgroundColor: "#a5d8ff",
    strokeColor: "#1971c2"
  },
  {
    type: "text",
    x: 150, y: 130,
    text: "Hello World",
    fontSize: 20
  },
  {
    type: "arrow",
    x: 300, y: 150,
    width: 100, height: 0,
    points: [[0, 0], [100, 0]]
  }
]);

Export to Image

import { exportToBlob, exportToSvg } from "@excalidraw/excalidraw";

const blob = await exportToBlob({
  elements,
  mimeType: "image/png",
  appState: { exportWithDarkMode: false }
});

const svg = await exportToSvg({ elements });

Collaboration (Real-time)

<Excalidraw
  isCollaborating={true}
  onPointerUpdate={(payload) => {
    broadcastToOthers(payload);
  }}
/>

Key Features

• Embeddable React component for any app
• Programmatic API for creating diagrams from code
• Export to PNG, SVG, or JSON
• Real-time collaboration support
• Custom libraries and shapes

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.