Excalidraw: An Embeddable Hand-Drawn Whiteboard for React Apps
Virtual whiteboard for sketching hand-drawn like diagrams
At a glance
- What is it?
- Excalidraw is an open source, MIT-licensed whiteboard that renders hand-drawn style diagrams and ships as a React component. This review covers its core canvas, the hosted app's collaboration features, and what you trade off when you embed it.
- Who is it for?
- Adopt Excalidraw if you need a free, embeddable whiteboard for React and can accept that real-time collaboration and end-to-end encryption are not yet in the npm package. Do not adopt it if your product requires multi-user editing out of the box or if you need a non-hand-drawn aesthetic.
- Can I use it commercially?
- Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
- Is it still maintained?
- Yes. The repository received new commits within the last day.
- What is it written in?
- Mainly TypeScript, according to GitHub's language statistics.
Answers come from the project's GitHub data, last synced on September 15, 2026, and from our analysis. They are not legal advice.
DEEP OPEN-SOURCE ANALYSIS
What Excalidraw Solves and Who It Is For
Excalidraw solves a narrow but common problem: giving users a freehand sketching surface that produces clean, hand-drawn looking diagrams without requiring design skill. It is for developers building React applications that need an embedded whiteboard, such as diagramming tools, note-taking apps, or planning interfaces. The hosted site excalidraw.com is a minimal showcase of what the package can do, not the product itself. The repository is the source for both the npm package and the hosted app, which means you can see exactly how the showcase is built. The target user is a frontend engineer who wants a canvas with shapes, arrows, and free-drawing, and who is willing to integrate a third-party component rather than build one from scratch.
The Core Mechanism: A Canvas with a Hand-Drawn Renderer
The package is a React component that renders an infinite, canvas-based whiteboard. The hand-drawn style is applied to every shape, including rectangles, circles, diamonds, arrows, and lines. The rendering is not a filter on top of normal vector graphics; it is a distinct drawing algorithm that gives edges a slightly irregular, sketch-like appearance. The canvas supports zoom and panning, which are essential for an infinite surface. The data model is an open format: drawings export as a .excalidraw JSON file. This is a key architectural point. The JSON is the source of truth, so you can save, load, and share drawings outside the app. The package also supports image insertion, shape libraries, and localization, which are all features you would expect from a mature editor.
Getting It Running: Installation and Integration
Installation is straightforward for a React project. The README gives two commands. With npm: npm install react react-dom @excalidraw/excalidraw. With yarn: yarn add react react-dom @excalidraw/excalidraw. Note that react and react-dom are peer dependencies, so you must have them in your project already. After installation, you import the component and render it. The README does not show a code example, but the documentation at docs.excalidraw.com covers the integration details. The package is published on npm under the scoped name @excalidraw/excalidraw. For running the repository locally for development, the README points to a separate Development Guide, which is not included in the README. That separation is worth noting: the npm package is the integration path, while the repo's excalidraw-app directory contains the hosted app's source.
The Hosted App vs. The npm Package: A Feature Gap
The hosted app at excalidraw.com includes features that the npm package does not yet have. Those features are real-time collaboration, end-to-end encryption, local-first autosave to the browser, and shareable readonly links. The README states that these will be added as drop-in plugins for the npm package in the future. That is a clear limitation for anyone embedding the package today. If you need multi-user editing, you cannot get it from the package right now. You would have to build your own collaboration layer on top of the JSON format, which is a significant engineering effort. The end-to-end encryption is tied to the hosted app, so self-hosted or embedded deployments do not get that security property by default. This gap is the single most important factor when deciding whether to adopt the package.
Limitations and Failure Modes
The most obvious limitation is the missing collaboration features in the npm package. The README says they are coming, but there is no timeline. Another limitation is the hand-drawn style itself. It is the project's identity, but it is also a constraint. If your product needs precise, technical diagrams with straight lines and exact angles, Excalidraw will fight you. The style is not configurable. The.excalidraw JSON format is open, but it is also a proprietary schema. You need to check whether your backend can store and parse that format, or whether you need to convert it to something else. The package is React-only, so it is the wrong tool for a non-React frontend. Finally, the README lists a wide range of tools, but it does not mention any advanced features like layers, grouping, or alignment guides. Those may exist, but the README does not confirm them, so you should verify before assuming.
Alternatives and Their Different Approaches
The main alternative is to build a whiteboard from scratch using a canvas library like Fabric.js or Konva. That approach gives you full control over rendering and interaction, but it requires you to implement every tool, the undo/redo stack, and the export format yourself. Excalidraw gives you all of that out of the box. Another alternative is to use a diagramming tool like Mermaid, which generates diagrams from text. Mermaid is not a whiteboard; it is a declarative syntax that renders to SVG. That is a different approach entirely: you type a description, and the diagram is generated. Excalidraw is freehand. The choice depends on whether your users need to sketch freely or just display a structured diagram. A third alternative is to use a commercial whiteboard SDK like tldraw, but the README does not include details on that, so this review does not compare them. The key difference is that Excalidraw is free, open source, and MIT-licensed, while commercial SDKs may have licensing costs.
Maintenance, Upgrades, and License Implications
The repository is actively maintained. The last push was April 2026, and version 0.18.1 was released on that same day. Version 0.18.0 came in March 2025, and 0.17.3 in February 2024. That release cadence shows regular updates, but it also means you should expect breaking changes between minor versions. The package is pre-1.0, so the API may change. The license is MIT, which is permissive. You can use it in commercial products, modify it, and distribute it, as long as you include the original copyright notice. This is a low-license-friction choice for most companies. The README mentions that the hosted app features will become plugins, so you should watch for those releases if you need collaboration. Upgrading the package may require adjusting to new component props or rendering behavior, so read the changelog before each update. The project also has a paid tier, Excalidraw+, but the README does not specify what it includes, so this review cannot comment on it.
Editorial conclusion
Adopt Excalidraw if you need a free, embeddable whiteboard for React and can accept that real-time collaboration and end-to-end encryption are not yet in the npm package. Do not adopt it if your product requires multi-user editing out of the box or if you need a non-hand-drawn aesthetic. Before committing, verify the current state of the package's plugin roadmap, test the .excalidraw JSON format against your data needs, and confirm that the hand-drawn style fits your brand, since the core rendering style is not configurable.
Community notes