Overview
Excalidraw is best understood as a structured visual-document engine, not just a canvas: one scene model connects elements, rendering, exports, browser persistence, encrypted collaboration, and the embeddable React editor. The series follows those projections and their failure boundaries, showing what the hosted app provides and what an integrating host must own for storage, identity, recovery, browser behavior, and conflict policy.
Learning outcomes
- Excalidraw’s durable center is a structured scene, not the pixels on its canvas.
- Rendering, export, persistence, and collaboration are distinct projections with different failure modes.
- The hosted app supplies concrete local-first and encrypted collaboration paths, not universal guarantees.
- Embedding Excalidraw exposes a scene contract; the host still owns identity, storage, recovery, and policy.
Keywords
Preview every chapter · Unlock full text, audio, and video from chapter 4
PlansFAQ
What is Excalidraw’s core architecture?
Excalidraw centers on a structured scene whose elements preserve geometry, relationships, identity, and version data. Rendering is one projection; files, exports, storage, and collaboration are other boundaries around it.
How do Excalidraw exports differ?
JSON preserves structured document data; PNG preserves appearance; SVG preserves vector-oriented output and can carry an embedded scene payload. Image files and external embeds may still limit self-containment.
Is Excalidraw local-first and serverless?
The hosted Excalidraw app is local-first, using localStorage for structured state and IndexedDB for image data, but it is not serverless. Debouncing, browser limits, partial file failures, and collaboration handoff bound its durability.
How does Excalidraw handle concurrent edits?
Excalidraw compares per-element versions, nonces, deletion state, and fractional indices to make deterministic choices and efficient deltas. It does not semantically merge every simultaneous edit, and full-scene resync helps repair gaps.
What must a host own when embedding Excalidraw?
A host embedding the React package must choose its identity, storage, file handling, recovery, SSR boundary, access policy, and collaboration services. The package exposes scene data and controls but does not automatically provide the hosted app’s surrounding guarantees.