finds.dev← search

// the find

mirayavandiepen/excalidraw-clone

★ 457 · TypeScript · updated Apr 2024

🥷 Excalidraw clone built with React and TypeScript.

A hand-drawn whiteboard app built as a learning exercise to understand how Excalidraw works under the hood. Uses Rough.js for the sketchy rendering style. Aimed at developers who want to study canvas manipulation, hit-testing, and undo/redo patterns in React — not a tool you'd ship to users.

The testing setup is unusually thorough for a learning project — Cypress e2e tests cover all four tool types (line, pencil, rectangle, text) and the Vitest unit tests cover coordinate math like near-point detection and resize coordinate calculation. The utility functions are properly decomposed into single-responsibility files, which makes the canvas math readable. The history hook implementing undo/redo with a custom stack is a clean, self-contained example of that pattern. Using Vite + TypeScript from the start keeps the project easy to run locally.

Last commit is April 2024 and the author's own README lists missing fundamentals — no circle/eraser, no color picker beyond the default, no responsive layout. The `any` escape hatch mentioned in the README for Rough.js elements is a real smell; type-safety breaks exactly where the interesting canvas logic lives. There are only four shapes and no export — you can't save your work anywhere. This is a finished portfolio piece, not an active project, so don't expect the gaps to close.

View on GitHub → Homepage ↗

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →