The Whiteboard Tool That Draws Like You Do (But Better)
You know the drill: you're in a meeting, trying to sketch out an architecture diagram or a user flow, and you reach for a drawing tool. Everything comes out looking like sterile, perfect rectangles and crisp arrows. But your ideas aren't sterile—they're messy, exploratory, and half-formed. That's where Excalidraw comes in. It's an open source whiteboard that embraces the hand-drawn aesthetic, making your diagrams look intentionally sketchy rather than accidentally sloppy.
What It Does
Excalidraw is a virtual whiteboard with a distinctive hand-drawn style. At its core, it's an infinite canvas where you can create diagrams, wireframes, or just doodle. The rendering engine gives everything a slightly imperfect, sketch-like appearance—think of it as the visual equivalent of a napkin sketch, but with all the benefits of a digital tool.
The project is split into two main parts. There's the npm package (@excalidraw/excalidraw), which is the editor component you can embed in your own applications. Then there's the full app at excalidraw.com, which is a minimal showcase of what you can build with that package. The app itself is part of the same repository, so you can see exactly how everything fits together.
Technically, it's built with React and ships as an npm package. The editor supports a wide range of tools: rectangles, circles, diamonds, arrows, lines, free-drawing, and erasers. You get arrow-binding with labeled arrows, undo/redo, zoom and panning, dark mode, image support, and shape libraries. It also supports localization (i18n), which is nice if you're building for an international audience.
Why It's Cool
The hand-drawn style isn't just a gimmick—it actually serves a purpose. When your diagrams look intentionally rough, they feel more approachable and less final. There's something about a perfectly polished diagram that makes people hesitant to critique it. A sketchy-looking diagram invites feedback and iteration. That's a genuinely clever design choice.
Here's what else makes it stand out:
-
End-to-end encryption for collaboration. The hosted app at excalidraw.com supports real-time collaboration with end-to-end encryption. That's a big deal for a free, open source tool. Your whiteboard sessions aren't being read by the server—they're private.
-
Local-first by default. The app autosaves to your browser, so you don't lose work if you close the tab. It also works as a PWA, which means it works offline.
-
Open file format. Your drawings export as
.excalidrawJSON files. That's not a proprietary binary blob—it's a structured, open format. You can export to PNG, SVG, or clipboard too, but the JSON format means your work isn't locked into a single tool. -
It's genuinely customizable. The README lists "customizable" as a feature, and the architecture backs that up. Since the editor is an npm package, you can embed it in your own app and build on top of it. The full app is just a "minimal showcase" of what the package can do.
-
Shareable read-only links. You can export a drawing to a link that others can view without editing. That's useful for getting feedback without worrying about someone accidentally messing up your diagram.
How to Try It
The easiest way to try Excalidraw is to just go to excalidraw.com and start drawing. No signup, no install. But if you want to integrate it into your own project, you'll want to install the npm package:
npm install @excalidraw/excalidraw
Or with yarn:
yarn add @excalidraw/excalidraw
The README notes that these instructions are for integrating the package into your own app. If you want to run the repository locally for development, you'll need to check out the Development Guide in their docs.
The repository itself is at github.com/excalidraw/excalidraw. It's MIT licensed, contributions are welcome, and there's an active Discord community if you get stuck or want to discuss features.
Final Thoughts
Excalidraw fills a specific niche that most diagramming tools miss. It's not trying to replace Visio or Figma—it's for when you want to communicate an idea quickly without making it look like a final spec. The end-to-end encryption on the hosted app is a genuinely thoughtful touch, and the open format means you're never locked in.
If you're building a tool that needs any kind of diagramming or whiteboard functionality, the npm package is worth a serious look. And even if you're not, the hosted app is handy to have bookmarked for those impromptu brainstorming sessions. It's free, it's open source, and it makes your sketches look intentional—which is more than most of us can say about our actual handwriting.
Follow @githubprojects for more developer tools and open source projects.