Excalidraw: Cool JS Tricks Behind the Scenes
summary
Excalidraw is a hand‑drawn diagram editor that ships concrete tricks: lines use rough points at 50% and 75% plus repeated bezier passes to fake sketchiness, circles link last point to the second to get worn edges, and randomness is made stable with a seeded randomness per scene so renders stay identical. Backend supports share links via URL hashes and client side Web Crypto keys for end-to-end encrypted scene blobs. Live collaboration, 80+ contributors, and a usage jump to ~12,000 weekly users validate it; canvas caching cuts redraws from ~30 ms to ~3 ms.
AI-written summary · about
chapters (12)
- 0:00Start
- 9:18Usability
- 19:38Random Generator
- 21:47End-to-End Encryption
- 23:16The Live Collaboration
- 27:40Rendering
- 29:20Canvas
- 30:33Adding a Caching Layer
- 35:58Is There a Way to Group Shapes and Resize Them Together
- 36:53Layout Dependencies
- 38:58Share Shapes
- 39:50Using Webgl
related talks
12mAlgorithmically Generated Visual Designs
25m"Code As A Canvas: Exploring Creative Coding With JavaScript"
22mDemo: Drawing Algorithms as Modular Objects: A Framework for Procedurally Generated(…)
23mJolly JS Journeys
55mJavaScript Blazingly FAST! Lessons from a Game Engine
20mdotJS 2012 - Mr.doob
26mRecreate Masterpieces of Modern Art with JavaScript!
24mCreating Interactive Data Visualizations for the Web