Excalidraw Project Structure
The beloved open-source virtual whiteboard. Excalidraw is a masterclass in high-performance React development, featuring a specialized canvas engine and a clean architecture that allows it to be used as both a standalone app and a reusable library.
Updated 2025-12-30
Project Directory
Repository Info
- Repository-excalidraw/excalidraw
- Stars-80k+
- License-MIT
- Last Analyzed-December 2025
Tech Stack
- Framework-React
- Language-TypeScript
- Rendering-Canvas API (2D)
- State-Custom state management
- Packaging-pnpm monorepo
Architecture Notes
Excalidraw is architected to be both an application and a library. The core drawing logic and UI components are housed in packages/excalidraw/, which is published to npm. The full-featured application (with collaboration and storage) lives in excalidraw-app/ and consumes the core package. This separation ensures that the drawing engine remains highly decoupled and reusable. It's particularly notable for its use of the Canvas API to achieve smooth, hand-drawn styles at high frame rates.
Key Directories
- packages/excalidraw/src/-The heart of the drawing engine, handling element math, rendering, and interaction
- excalidraw-app/src/-The application layer that adds collaboration, file management, and specific UI features
- packages/utils/-Contains critical mathematical and geometric utilities for canvas manipulation
Why This Structure?
Excalidraw is an exceptional example of a 'Library-First' architecture. It shows how to build a complex, interactive tool that remains lightweight and easy to integrate into other projects. It's a top-tier reference for anyone interested in graphics, canvas-based applications, and high-quality React engineering.