Excalidraw — Hand-Drawn Whiteboard SDK

Overview

Excalidraw is an open-source whiteboard that ships on npm as @excalidraw/excalidraw, a React component (latest stable 0.18.1; React 17, 18 and 19 are supported peers). It stores a scene as a plain JSON array of elements, so diagrams can be drawn by hand, generated from code, converted from Mermaid, exported as PNG/SVG, and kept in git as .excalidraw files.

Three things changed in 0.18 and break older snippets: the stylesheet must be imported explicitly, the ref prop was replaced by an excalidrawAPI callback prop, and types moved to @excalidraw/excalidraw/types and @excalidraw/excalidraw/element/types. The editor needs a browser, so it cannot render on the server.

Instructions

Install and embed

npm install react react-dom @excalidraw/excalidraw