Excalidraw

Virtual whiteboard for sketching hand-drawn like diagrams GitHub: https://github.com/excalidraw/excalidraw

---

Overview

Excalidraw is a free, open-source virtual whiteboard application that lets users create diagrams, flowcharts, wireframes, and sketches with a distinctive hand-drawn aesthetic. Built as a React component and published as an npm package, it can be used standalone at excalidraw.com or embedded directly into other applications.

The project was initially created by Christopher Chedeau (vjeux) and has since grown into a thriving open-source community adopted by companies such as Google Cloud, Meta, CodeSandbox, Replit, Notion, and Obsidian.

---

Core Features

Drawing Tools

• Basic shapes: rectangle, circle, diamond, arrow, line
• Freehand drawing and eraser
• Text tool with custom fonts (Excalifont)
• Arrow binding and labeled arrows
• Shape libraries for reusable components

Canvas & UI

• Infinite canvas with zoom and pan support
• Dark mode
• Undo / Redo history
• Keyboard shortcuts for efficient workflow
• Customizable stroke width, roughness, color, and fill

Collaboration & Sharing

• Real-time multiplayer collaboration via shareable links
• End-to-end encryption for secure sessions
• Read-only shareable links for viewing
• PWA support — works fully offline
• Local-first: auto-saves to browser storage

Export & Integration

• Export to PNG, SVG, and clipboard
• Export/import in .excalidraw JSON format (open, human-readable)
• Embeddable as a React component via npm package @excalidraw/excalidraw
• Integrated into tools like Obsidian, VS Code extensions, Notion, and more

Localization

• Full i18n (internationalization) support with multiple languages

---

Technical Stack

Layer	Technology
Frontend	React, TypeScript
Canvas	HTML5 Canvas API
Drawing	Rough.js (hand-drawn rendering)
Fonts	Excalifont (custom), Virgil (legacy)
Package	Published on npm as @excalidraw/excalidraw
License	MIT

---

Use Cases

• System architecture diagrams — informal but expressive sketches for technical teams
• Wireframing & UI mockups — quick low-fidelity prototypes before Figma
• Brainstorming & ideation — visual thinking in meetings or async
• Teaching & presentations — hand-drawn style keeps content approachable
• Documentation — embed live diagrams in wikis, Notion pages, or README files

---

Excalidraw+ (Premium)

Beyond the free open-source version, the team offers Excalidraw+, a paid cloud product that adds:

• Cloud storage and organized workspaces
• Persistent collaboration sessions
• Voice chat within the canvas
• Presentation mode (slide-based export to PPTX/PDF)
• Permission management and guest sharing
• 14-day free trial available

---

Community & Adoption

• Stars: 90,000+ GitHub stars (one of the most starred whiteboard tools)
• Contributors: 800+ open-source contributors
• Used by: Google Cloud, Meta, CodeSandbox, Obsidian, Replit, Slite, Notion, HackerRank
• Integrations: VS Code extension, Obsidian plugin, Confluence plugin, and more

---

Getting Started

Use Online

Go to https://excalidraw.com — no sign-up required.

Self-host / Embed

npm install @excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

export default function App() {
  return <Excalidraw />;
}

Run Locally

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install
npm start

---

Summary

Excalidraw stands out among diagramming tools because of its deliberate embrace of the hand-drawn aesthetic — rough edges and fluid lines that keep content informal and focused on ideas rather than polish. Its combination of zero-friction onboarding (no login needed), powerful collaboration, open format, and embeddability as a React library makes it a go-to choice for developers, designers, and teams worldwide.