Excalidraw: A Hand-Drawn Whiteboard That Keeps Your Diagrams to Yourself

You've probably been in this spot before: you need to sketch out an architecture diagram, a rough wireframe, or just a quick flowchart to explain an idea, and you're stuck choosing between rigid diagramming tools that make everything look like it came out of a corporate template generator, or sending your thoughts through some cloud service you don't fully trust. Excalidraw sits right in that gap. It's an open source virtual whiteboard with a hand-drawn aesthetic, and it manages to be both collaborative and end-to-end encrypted.

What It Does

At its core, Excalidraw is a canvas-based whiteboard that renders everything in a loose, hand-drawn style. You get an infinite canvas and a solid set of drawing tools: rectangles, circles, diamonds, arrows, lines, free-draw, and an eraser. Arrows can be bound to shapes and labeled, which matters more than you'd think once you start building actual diagrams rather than doodles.

The editor itself is distributed as an npm package (@excalidraw/excalidraw), so you can embed it directly into your own React application. It supports dark mode, image embedding, shape libraries, localization, and export to PNG, SVG, or the clipboard. There's also an open format—you can save your drawings as .excalidraw JSON files, which means your work isn't locked into anyone's proprietary format.

Then there's excalidraw.com, the hosted app, which is essentially a showcase of what you can build with the library. Its source code lives in the same repository, and it layers on the features you'd expect from a real product: PWA support so it works offline, real-time collaboration, end-to-end encryption, local-first autosaving to your browser, and shareable readonly links. The README notes that these app-level features will eventually arrive as drop-in plugins for the npm package.

Why It's Cool

The encryption story is the real differentiator. Plenty of whiteboard tools offer collaboration. Very few offer end-to-end encryption alongside it. That combination means you can share a link with a teammate and actually collaborate in real time without the contents of your diagram being readable to anyone in the middle. For teams working on anything sensitive—or just people who'd rather not hand their half-formed ideas to a third party—that's a meaningful distinction.

The hand-drawn style isn't a gimmick. It's a deliberate choice that lowers the stakes of putting something on a canvas. A perfect rectangle invites scrutiny; a wobbly one invites conversation. If you've ever watched someone freeze up in front of a "professional" diagramming tool, you know why this matters.

Local-first is the right default. Autosaving to the browser means you don't lose work when a connection drops, and the offline PWA support reinforces that. Your drawing exists on your machine first, and the network is a bonus rather than a requirement.

The open format keeps you honest. Exporting to .excalidraw JSON means you can version-control your diagrams, diff them, or write tooling around them. Compare that to formats that only exist inside one vendor's ecosystem.

It's embeddable. The npm package angle is easy to overlook, but it's arguably the most interesting part for developers. You can drop the whole editor into your own app and build on top of it rather than routing users to a separate site.

• MIT licensed, so there's no licensing gymnastics required.
• A wide tool set without overwhelming you with options.
• Undo/redo, zoom, and panning—the basics done properly.

How to Try It

The fastest path is just to open excalidraw.com and start drawing. No account needed for the basics.

If you want to embed the editor in your own project, install the npm package:

npm install react react-dom @excalidraw/excalidraw

The README notes that these instructions are specifically for integrating the package into your own app. If you want to run the repository locally for development instead, there's a separate development guide linked from the docs.

Once installed, you import the component and render it inside your React tree—the docs site covers the integration details. The repository itself is at github.com/excalidraw/excalidraw, and there's a Discord if you want to talk to the people building it. PRs are welcome, per the README's own badge.

Final Thoughts

Excalidraw is a good fit if you want a whiteboard that feels informal but doesn't force you to compromise on privacy, or if you're a developer looking for a diagramming component you can actually embed and extend. The hand-drawn aesthetic will not appeal to everyone—if you need pixel-perfect output, look elsewhere—but for sketching, explaining, and collaborating, it hits a sweet spot. The roadmap toward bringing the hosted app's collaboration features into the npm package as plugins is worth watching, because that's the piece that would make it a no-brainer for internal tooling.

Follow @githubprojects for more developer tools and open source projects.