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>
);
}v0.18.0 (2025-03-11)
- –Command palette #7804
- –Multiplayer undo / redo #7348
- –Editable element stats #6382
- –Text element wrapping #7999
- –Font picker with more fonts #8012
v0.17.3 (2024-02-09)
- –Keep customData when converting to ExcalidrawElement. #7656
- –Umd build for browser since it was breaking in v0.17.0 #7349. Also make sure that when using `Vite`, the `process.env.IS_PREACT` is set as `"true"` (string) and not a boolean.
- –Disable caching bounds for arrow labels #7343
- –Bounds cached prematurely resulting in incorrectly rendered labels #7339
v0.17.0 (2023-11-14)
- –Added support for disabling `image` tool (also disabling image insertion in general, though keeps support for importing from `.excalidraw` files) #6320.
- –Support `excalidrawAPI` prop for accessing the Excalidraw API #7251.
- –Export `getCommonBounds` helper from the package #7247.
- –Support frames via programmatic API #7205.
- –Export `elementsOverlappingBBox`, `isElementInsideBBox`, `elementPartiallyOverlapsWithOrContainsBBox` helpers for filtering/checking if elements within bounds. #6727
See how people are using excalidraw
Top in Frontend
Related Repositories
Discover similar tools and frameworks used by developers
next.js
File-based React framework with hybrid rendering strategies.
components
Material Design components and utilities for Angular applications.
Font-Awesome
Scalable vector icon library with multiple rendering formats.
chakra-ui
Themeable React components with built-in accessibility and Emotion styling.
responsive-html-email-template
Cross-client HTML email starter with inline CSS support.