Skip to main content
Excalidraw

​
Welcome to Excalidraw

Excalidraw is an open source virtual hand-drawn style whiteboard that you can embed directly into your React applications. It’s collaborative, end-to-end encrypted, and designed to make creating diagrams feel natural and intuitive.

Installation

Get started by installing the Excalidraw npm package in your project

Quick Start

Build your first drawing canvas in just 5 minutes

API Reference

Explore the complete API documentation and component props

Integration Guide

Learn advanced integration patterns and customization options

​
What is Excalidraw?

Excalidraw is a React component library that provides a complete whiteboard experience with a hand-drawn aesthetic. Originally built as a standalone web application at excalidraw.com, the library allows developers to embed the same powerful drawing capabilities into their own applications.
Excalidraw takes 100% of the width and height of its containing block, so make sure the container has non-zero dimensions.

​
Key Features

Excalidraw comes packed with features that make it perfect for diagrams, wireframes, and collaborative whiteboarding:

Free & Open Source

MIT licensed and completely free to use in any project

Infinite Canvas

Canvas-based whiteboard with unlimited drawing space

Hand-Drawn Style

Beautiful sketch-like aesthetic powered by Rough.js

Dark Mode

Built-in dark mode support with theme customization

Rich Drawing Tools

Rectangle, circle, diamond, arrow, line, free-draw, eraser, and more

Image Support

Import and manipulate images directly on the canvas

Export Options

Export to PNG, SVG, clipboard, or .excalidraw JSON format

Customizable UI

Extensive customization options for UI elements and behavior

Localization

Built-in internationalization (i18n) support

Shape Libraries

Load and manage custom shape libraries

Arrow Binding

Smart arrows that bind to shapes with labeled support

Zoom & Pan

Smooth zooming and panning for large diagrams

​
Who Uses Excalidraw?

Excalidraw is trusted by leading companies and integrated into popular developer tools:
  • Google Cloud - Architecture diagrams
  • Meta - Internal tools and documentation
  • CodeSandbox - Visual programming tools
  • Notion - Embedded drawing canvas
  • Replit - Interactive diagrams
  • Obsidian - Note-taking and knowledge management
  • HackerRank - Technical interviews and problem solving
Check out the Obsidian Excalidraw plugin to see an advanced integration example!

​
Quick Example

Here’s a minimal example of embedding Excalidraw in a React application: 
import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";

export default function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw />
    </div>
  );
}

​
Package Information

Current Version

v0.18.0

React Support

React 17, 18, and 19

License

MIT License

​
What’s Next?

1

Install Excalidraw

Follow our installation guide to add Excalidraw to your project using npm or yarn.
2

Build Your First Canvas

Jump into the quick start guide and create a working drawing canvas in minutes.
3

Customize & Extend

Explore the API documentation to customize the UI, handle events, and add advanced features.

​
Need Help?

GitHub Issues

Report bugs or request features

Discord Community

Join our active Discord community

Contributing

Learn how to contribute to Excalidraw

Twitter

Follow @excalidraw for updates
Looking to run Excalidraw locally for development? Check out our Development Guide to set up your local environment.