Guide · Open source
How to use Excalidraw: draw, share and export diagrams
Updated · written with AI from the project's own documentation and checked against our catalogue data
Excalidraw is an open-source whiteboard for drawing diagrams, wireframes and sketches in a deliberately hand-drawn style. This guide covers the hosted app at excalidraw.com, and then the npm package for developers who want to embed the editor in their own React app. After reading, you will know which features to use, how to share and export a drawing, and what the developer setup involves.
Excalidrawexcalidraw/excalidraw · ★ 135k · MIT Install options & downloads Quick start
- 1Open the editor. Go to https://excalidraw.com in your browser. No install is required for the hosted app.
- 2Draw your diagram. Pick a tool such as a rectangle, arrow or free-draw, then click and drag on the canvas. Bind arrows to shapes to keep connections clear.
- 3Collaborate or share. Use real-time collaboration with others, or export a readonly shareable link.
- 4Export your work. Export the drawing to PNG, SVG or the clipboard, or save it as an .excalidraw JSON file.
- 5Embed for developers (optional). Install the npm package with npm or yarn alongside react and react-dom to use the editor in your own app.
What Excalidraw is and who it suits
Excalidraw is a virtual whiteboard with a hand-drawn look. The hosted app at excalidraw.com is a minimal showcase of the editor, and the same editor is published as an npm package.
- Good for teams sketching diagrams or wireframes together on a shared canvas.
- Good for explanatory drawings where a casual, informal look is wanted.
- Good for users who care about end-to-end encryption for shared drawings.
- Not a fit for pixel-perfect vector design, since the README does not describe precision tools.
Open excalidraw.com and start drawing
No installation is listed for the hosted app. Open https://excalidraw.com in a browser and start drawing on the infinite canvas. The app is a PWA and the README says it works offline.
- Use the tools for rectangles, circles, diamonds, arrows, lines, free-draw and the eraser.
- Arrows can bind to shapes, and arrows can carry labels.
- Zoom and pan across the canvas, and use undo and redo as you go.
- Dark mode is available.
Collaborate and keep drawings private
The hosted app supports real-time collaboration and end-to-end encryption. Local-first support autosaves your work to the browser, so your drawing persists between visits on that browser.
- Real-time collaboration: share the session with others to draw together.
- End-to-end encryption: applies to shared drawings on the hosted app.
- Autosave: the app saves to the browser automatically.
- Shareable links: export a readonly link you can send to others.
Export and save your drawing
Excalidraw exports drawings in several formats. The open format means you can keep your work as a plain file you control.
- Export to PNG, SVG or the clipboard.
- Save the drawing as an .excalidraw JSON file.
- Add images and use shape libraries to reuse elements.
Embed Excalidraw in your own React app
Follow this path only if you are a developer. The README says the npm instructions are for integrating Excalidraw into your own app. To run the repository locally for development, the README points to the Development Guide instead. The package install uses npm or yarn, and the prerequisites listed are React and React DOM alongside the package itself.
- Install with npm or yarn, including react and react-dom.
- Read the documentation at docs.excalidraw.com for installation details.
npm install react react-dom @excalidraw/excalidrawGet help and contribute
The README links to the issue tracker for bugs and feature requests, and to a Discord server for chat. Translation help is also welcome through the translation guide.
- Report bugs or missing features on the GitHub issues page.
- Ask questions or join the community on Discord.
- Help with translations via the translation guide.
What people use it for
- Sketching system diagrams with a team on a shared canvas.
- Drawing wireframes for an app or website idea.
- Making casual explanatory drawings for documents or presentations.
- Embedding a whiteboard editor in a React application as a developer.
Frequently asked questions
Is Excalidraw free?
Excalidraw is described as free and open-source, and the repository is released under the MIT license. The README also mentions an optional paid product, Excalidraw+, and sponsorship through Open Collective.
Do I need to install Excalidraw?
For the hosted app, the source does not list an install step; you open excalidraw.com in a browser. Installation with npm or yarn is only for developers who want to embed the npm package in their own app.
Does Excalidraw work offline?
The README says the hosted app is a PWA that works offline, and it autosaves to the browser. Real-time collaboration needs a connection.
Is Excalidraw end-to-end encrypted?
The README says the hosted app features end-to-end encryption for shared drawings. Check the documentation for details on how it applies to your use.
Can I self-host Excalidraw collaboration?
The README only links to the hosted app for real-time collaboration and does not describe a self-hosting setup for the collaboration service.
How does Excalidraw compare to tldraw, draw.io or Miro?
The README does not compare these tools. Excalidraw's distinguishing traits from the source are its hand-drawn style, open .excalidraw JSON format, and embeddable npm package. Projects such as tldraw, Draw.io (diagrams.net), Penpot and Miro are listed as comparable projects.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Excalidraw suits teams who want to sketch diagrams together, people who want an informal hand-drawn look, and developers who want an embeddable whiteboard editor. If you need precise vector design or self-hosted collaboration, look at other tools such as Penpot or draw.io, which are listed as comparable projects.
Install options & downloads