Excalidraw Guide: What It Is, Features, and How to Get Started

What it is

Excalidraw is an open-source virtual whiteboard built for sketching diagrams, wireframes, and freeform illustrations with a distinct hand-drawn aesthetic. Rather than generating rigid, highly polished vector shapes, the tool emulates the informal look of pen and paper. This sketched feel helps teams conceptualize software architectures, user flows, and early-stage prototypes without getting bogged down in pixel-perfect formatting. According to its repository metadata, Excalidraw is released under the permissive MIT open-source license.

The software exists in two complementary formats: a standalone web application hosted at excalidraw.com and an embeddable React library distributed as the @excalidraw/excalidraw npm package. According to the project README, the hosted web platform serves as a minimal showcase demonstrating what developers can create using the underlying component, with the full source code for the hosted application maintained directly in the main repository.

At its foundation, Excalidraw provides an infinite canvas—a digital workspace without fixed physical margins or page limits. Users can pan and zoom across this space to organize complex webs of visual thoughts. In addition to personal drawing, the platform supports multi-user collaboration secured by end-to-end encryption. In end-to-end encryption, data is encrypted on the sender’s device and can only be decrypted by participating recipients, meaning outside servers cannot view or intercept the contents of the whiteboard session.

What it can do

Excalidraw combines freehand sketching capabilities, geometric shapes, and data export features into a focused canvas environment.

Core Drawing and Canvas Tools

The editor provides a straightforward set of drawing tools for building structured diagrams and freehand sketches:

• Geometric Shapes: Users can insert rectangles, circles, and diamonds to map out process steps, software components, or interface mockups.
• Lines and Freehand Drawing: The editor includes straight lines, free-draw pen tools for organic scribbling, and an eraser to remove mistakes.
• Arrow-Binding and Labeled Arrows: Arrows can attach directly to the borders of shapes (arrow-binding), ensuring lines remain connected when shapes are repositioned. Users can also place text labels directly along connector arrows to clarify data flow.
• Canvas Navigation: An infinite canvas allows infinite panning and zooming so users can zoom out for high-level overviews or zoom in on intricate details.
• Undo and Redo: Full history controls allow users to quickly step backward or forward through their drawing actions.
• Dark Mode and Customization: The canvas can switch between light mode and dark mode to accommodate different working environments, and elements can be customized to match preferred visual styles.
• Shape Libraries and Images: The editor supports image uploads onto the whiteboard as well as custom shape libraries, allowing users to import and reuse collections of graphical components.
• Localization (i18n): The interface supports localization across multiple languages, making the application accessible to international teams.

File Formats and Exporting

Excalidraw treats user data portably through several export and storage methods:

• Image Exports: Canvases can be exported directly as PNG raster images, scalable SVG vector graphics, or copied to the system clipboard for pasting into other documents.
• Open Data Format: Whiteboards can be saved as .excalidraw JSON files. Because this format is open, diagrams remain machine-readable, easy to back up, and simple to re-import into another Excalidraw workspace.

Hosted Web Application Features

The web app at excalidraw.com offers several integrated architectural capabilities:

• Local-First Autosaving: The application saves drawings directly into the web browser’s local storage. This local-first design ensures work is saved on the user’s machine without requiring a server connection.
• Progressive Web App (PWA) Support: Excalidraw functions as a PWA, allowing users to open and use the whiteboard offline when an internet connection is unavailable.
• Real-Time Collaboration: Multiple individuals can join a shared session to sketch on the same canvas concurrently.
• End-to-End Encryption: Live collaborative drawing sessions are encrypted to protect privacy across networks.
• Shareable Read-Only Links: Users can generate view-only links to present static versions of diagrams to outside reviewers.

According to the project README, the maintainers plan to package these hosted application capabilities into drop-in plugins for the npm package in future updates.

How to get started

Getting started with Excalidraw can be done either by using the public web app or by integrating the component into a custom application.

Using the Hosted Web Whiteboard

To begin sketching immediately, navigate to excalidraw.com in any modern web browser. The application loads directly into an active, blank canvas:

1. Select a shape, connector, or freehand tool from the primary toolbar.
2. Click and drag anywhere on the canvas to place shapes, write notes, or bind arrows between elements.
3. Your work automatically saves to your local browser storage.
4. To collaborate, initiate a live session from the collaboration menu to generate an end-to-end encrypted room, or export a read-only shareable link.
5. Save your final drawing by exporting to PNG, SVG, or downloading the raw .excalidraw JSON file.

Installing the Developer Package

Software developers who want to integrate the whiteboard into a React-based web project can install the official npm package. According to the project README, you can install the package alongside its peer dependencies with npm or yarn:

npm install react react-dom @excalidraw/excalidraw
# or
yarn add react react-dom @excalidraw/excalidraw

For configuration steps, props, and API usage, developers can refer to the official installation documentation at https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation. Those interested in contributing to the project or running the source repository locally can consult the development guide at https://docs.excalidraw.com/docs/introduction/development.

Integrations and Community

Excalidraw also integrates into developer workflows through a dedicated Visual Studio Code extension (pomdtr.excalidraw-editor). Community members can participate in the project’s ecosystem through several channels:

• Report issues or submit pull requests on GitHub.
• Join the community Discord chat (https://discord.gg/UexuTaE).
• Follow project news via the official Twitter handle (@excalidraw).
• Help translate the interface using the translation contribution guidelines managed via Crowdin.

Pricing and requirements

Excalidraw is published as free and open-source software distributed under the MIT license, according to its repository metadata. This license applies to both the source code and the publicly distributed @excalidraw/excalidraw npm package.

For users and organizations looking for team-oriented cloud features, the project provides Excalidraw+, as well as sponsorship opportunities via Open Collective. Specific pricing and plans are subject to the official page at Excalidraw+ and excalidraw.com.

Technical Requirements

• Web App Users: Accessing the hosted whiteboard requires an up-to-date web browser that supports JavaScript, local browser storage for local-first file persistence, and Progressive Web App standards for offline drawing.
• Developers: Embedding the @excalidraw/excalidraw library requires a JavaScript runtime with a package manager such as npm or yarn, alongside installed copies of react and react-dom.
• Infrastructure Support: According to the project README, Excalidraw receives complimentary services from external providers, including Vercel for hosting, Sentry for error tracking, and Crowdin for translation localization.

Who it is for

Excalidraw suits a wide range of individuals and technical teams who need a quick, collaborative sketching medium:

• Software Engineers and Architects: Developers who need to draft system topologies, database structures, or logic flowcharts quickly without fighting complex diagram formatting rules. The arrow-binding and labeled arrow features make system flows easy to trace.
• Product Managers and UI Designers: Teams creating low-fidelity wireframes, interface concepts, and feature roadmaps. The hand-drawn aesthetic clarifies that wireframes are working drafts rather than final designs.
• Remote and Distributed Teams: Groups looking for a live brainstorming space during meetings, retrospectives, or design sprints, with the assurance of end-to-end encrypted data transmission.
• Application Builders: Frontend developers looking to embed an infinite canvas whiteboard directly into their web applications using an open-source React component. According to the project README, organizations and platforms that integrate Excalidraw include Google Cloud, Meta, CodeSandbox, Obsidian Excalidraw, Replit, Slite, Notion, and HackerRank.
• Note-Takers and Documentarians: Users who keep visual notes alongside documentation, such as knowledge workers using the Obsidian Excalidraw plugin or programmers using the VS Code extension to store diagrams right next to application code.
• Multilingual Teams: Organizations operating across diverse regions that benefit from an interface translated into multiple languages through community localization.

Alternatives

• tldraw is an open-source collaborative digital whiteboard library and application available on GitHub.
• draw.io is an open-source diagramming and flowcharting software project hosted on GitHub.

Sources

• https://github.com/excalidraw/excalidraw
• https://excalidraw.com/
• https://github.com/tldraw/tldraw
• https://github.com/jgraph/drawio