Excalidraw: Open source hand-drawn style whiteboard
React canvas library with encrypted collaborative drawing.
Learn more about excalidraw
Excalidraw is a canvas-based drawing tool built as a React component and distributed as an npm package. The application uses a local-first architecture with optional end-to-end encrypted real-time collaboration, storing drawings in a JSON-based .excalidraw format. It supports multiple export formats including PNG, SVG, and clipboard, along with shape libraries and localization across numerous languages. The tool is commonly used for creating wireframes, diagrams, flowcharts, and architectural sketches in both standalone and embedded contexts.
Embeddable React Component
Distributed as an npm package that integrates into existing applications without custom implementation. Supports both standalone and embedded modes with customization options for developers building collaborative tools.
Open JSON Format
Stores drawings in human-readable .excalidraw JSON instead of proprietary binaries. Enables version control, programmatic manipulation, and interoperability across tools without vendor lock-in.
End-to-End Encrypted Collaboration
Real-time multiplayer editing with client-side encryption ensures server cannot access drawing content. No account creation required for sharing via readonly links or collaborative sessions.
import { Excalidraw } from "@excalidraw/excalidraw";
export default function App() {
return (
<div style={{ height: "500px" }}>
<Excalidraw />
</div>
);
}Drops UMD bundle for ESM-only distribution; requires ES module support, updated TypeScript moduleResolution, and bundler config changes.
- –Switch imports to ESM format and set TypeScript moduleResolution to 'bundler', 'node16', or 'nodenext' (not 'node' or 'node10').
- –Copy fonts from node_modules/@excalidraw/excalidraw/dist/prod/fonts to your public directory and set window.EXCALIDRAW_ASSET_PATH if self-hosting.
Fixes UMD browser build broken in v0.17.0 and requires Vite users to set process.env.IS_PREACT as string "true".
- –Set process.env.IS_PREACT to JSON.stringify("true") in Vite config to avoid runtime errors with Preact detection.
- –Resolves arrow label rendering bugs caused by premature bounds caching and preserves customData during element conversion.
Removes Ref support in favor of excalidrawAPI prop; discontinues ready/readyPromise APIs and changes useDevice hook return structure.
- –Replace all Ref usage with the excalidrawAPI prop to access the Excalidraw API after upgrading.
- –Update useDevice hook consumers to handle new editor/viewport breakpoint differentiation in return value.
See how people are using excalidraw
Top in Developer Tools
Related Repositories
Discover similar tools and frameworks used by developers
spdlog
Fast C++ logging with flexible sinks and fmt formatting.
nvm
nvm is a per-user, per-shell version manager for Node.js that allows switching between multiple installed Node versions from the command line. It works on any POSIX-compliant shell across Unix, macOS, and Windows WSL environments.
node
JavaScript runtime built on V8 for server-side development.
open-directory
Command-line search engine for indexed open directories.
playwright
Cross-browser automation framework with built-in test runner.