Excalidraw: A lightweight whiteboard for diagrams and collaboration
Project Overview
Excalidraw has become something of a quiet standard in the diagramming space, and its 122,000+ stars[1] on GitHub reflect just how broadly it’s been adopted — not just as a hosted app at excalidraw.com, but as an embeddable whiteboard canvas via its npm package. What’s interesting about Excalidraw’s trajectory is how it carved out a niche that sits between polished diagramming tools like draw.io and more heavyweight collaborative platforms like Figma or Miro. Rather than trying to be everything to everyone, the team made an early bet on the hand-drawn aesthetic as a deliberate UX choice: sketches feel less intimidating and more provisional than perfect vector graphics, which lowers the barrier to sketching out ideas quickly. The architecture reflects this philosophy in how it handles rendering — the rough-style SVG output is core to the identity, not a cosmetic layer. Written in TypeScript with React at its core, the editor is distributed as a library first, which means you’ll find it embedded inside Google Cloud’s architecture diagrams, Meta’s internal tools, and CodeSandbox’s collaborative environments[1]. That embeddability, combined with a clean API surface, is what separates Excalidraw from tools that are purely standalone applications.
What It’s For
If you need a whiteboard that lives inside your own application — whether that’s a project management tool, a documentation site, or a real-time collaboration feature — Excalidraw is the most battle-tested open-source option available. Its npm package[2] gives you an infinite canvas with shape libraries, arrow binding, image support, and export to PNG/SVG, all without forcing you into a proprietary format or a hosted service. Where it really shines is in scenarios where you want the feel of sketching on a whiteboard but need the results to be programmable and embeddable. The tradeoff is that the hand-drawn style, while charming, isn’t appropriate for every context — if you need precise, formal diagrams for technical documentation or architectural blueprints, you might find the aesthetic distracting rather than liberating. Similarly, while the real-time collaboration features exist in the excalidraw.com app, they’re not yet available as drop-in plugins for the npm package, which means if you need end-to-end encrypted multi-user editing embedded in your own app, you’re currently building that yourself on top of the canvas component.
How to Use It
Integration follows a straightforward React component pattern. You install the package alongside React, then mount the Excalidraw component wherever you need a whiteboard. The interesting architectural choice here is that Excalidraw isn’t a controlled component in the traditional sense — you interact with it through a ref API that exposes methods for importing/exporting data, toggling tools, and listening for changes. This means you have to wire up state management yourself if you want to persist drawings or synchronize them across sessions. The component accepts an initialData prop for loading existing drawings and an onChange callback for capturing edits, but the canvas state lives inside the component unless you explicitly manage it. This is a deliberate tradeoff: it keeps the component API simple at the cost of requiring boilerplate for anything beyond basic embedding. The examples below show the two most common patterns — basic embedding and loading an existing drawing.
Installs the Excalidraw npm package along with its React peer dependencies
npm install react react-dom @excalidraw/excalidrawMounts the whiteboard component with pre-existing drawing elements loaded from a JSON structure
<Excalidraw initialData={{ elements: initialElements, appState: {}, files: {} }} />Recent Updates
Latest Release: v0.18.1 (2025-03-11)
Bug fix release following the v0.18.0 major update which introduced significant changes to the library’s architecture and feature set
The gap between v0.17.3 (February 2024) and v0.18.0 (March 2025) was over a year, suggesting either a major architectural overhaul or a period of reduced active development on the core library. The team has been investing heavily in the Excalidraw+ commercial offering and the hosted editor, which may explain the slower cadence on the npm package. Community contributions remain active through the hacktoberfest and Discord channels.
Sources & Attributions
[1] 122,665 stars on GitHub — excalidraw/excalidraw [2] npm package @excalidraw/excalidraw — excalidraw/excalidraw