Excalidraw Editor | Blog | Documentation | Excalidraw+

Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.

Features

The Excalidraw editor (npm package) supports:

• 💯 Free & open-source.
• 🎨 Infinite, canvas-based whiteboard.
• ✍️ Hand-drawn like style.
• 🌓 Dark mode.
• 🏗️ Customizable.
• 📷 Image support.
• 😀 Shape libraries support.
• 👅 Localization (i18n) support.
• 🖼️ Export to PNG, SVG & clipboard.
• 💾 Open format - export drawings as an .excalidraw json file.
• ⚒️ Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
• ➡️ Arrow-binding & labeled arrows.
• 🔙 Undo / Redo.
• 🔍 Zoom and panning support.

Excalidraw.com

The app hosted at excalidraw.com is a minimal showcase of what you can build with Excalidraw. Its source code is part of this repository as well, and the app features:

• 📡 PWA support (works offline).
• 🤼 Real-time collaboration.
• 🔒 End-to-end encryption.
• 💾 Local-first support (autosaves to the browser).
• 🔗 Shareable links (export to a readonly link you can share with others).

We'll be adding these features as drop-in plugins for the npm package in the future.

Quick start

Install the Excalidraw npm package:

npm install react react-dom @excalidraw/excalidraw

or via yarn

yarn add react react-dom @excalidraw/excalidraw

Don't forget to check out our Documentation!

Contributing

• Missing something or found a bug? Report here.
• Want to contribute? Check out our contribution guide or let us know on Discord.
• Want to help with translations? See the translation guide.

Integrations

• VScode extension
• npm package

Who's integrating Excalidraw

Google Cloud • Meta • CodeSandbox • Obsidian Excalidraw • Replit • Slite • Notion • HackerRank • and many others

Sponsors & support

If you like the project, you can become a sponsor at Open Collective or use Excalidraw+.

Thank you for supporting Excalidraw

Last but not least, we're thankful to these companies for offering their services for free: