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>
);
}Introduces major collaboration and usability improvements including command palette, multiplayer undo/redo, and enhanced text/drawing features.
- –Command palette
- –Multiplayer undo / redo
- –Editable element stats
- –Text element wrapping
- –Font picker with more fonts
This release fixes several critical issues including UMD build problems, arrow label rendering bugs, and data preservation during element conversion.
- –Keep customData when converting to ExcalidrawElement
- –Umd build for browser since it was breaking in v0.17.0. 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
- –Bounds cached prematurely resulting in incorrectly rendered labels
Adds new API features including excalidrawAPI prop support, frame programmatic API, and image tool disabling capabilities.
- –Added support for disabling image tool (also disabling image insertion in general, though keeps support for importing from .excalidraw files)
- –Support excalidrawAPI prop for accessing the Excalidraw API
- –Export getCommonBounds helper from the package
- –Support frames via programmatic API
- –Export elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox helpers for filtering/checking if elements within bounds
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.
Angular 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.