How Excalidraw's Hand-Drawn Whiteboard Works (Rough.js)

Most "hand-drawn" whiteboard modes are a font swap — Comic Sans on a rectangle, done. Excalidraw doesn't do that. Every line, box, and fill on its canvas is redrawn through a small math library that jitters the geometry a little differently each time, so a rectangle never traces the exact same path twice. That's how Excalidraw's hand-drawn whiteboard effect actually works — a small trick, fully open source, and readable straight in the code.

What Excalidraw actually is

Per its own README: "An open source virtual hand-drawn style whiteboard. Collaborative and end-to-end encrypted." The main repo carries 133.2k stars and 15.5k forks, and it ships under the MIT license — free to use, fork, and embed commercially, no copyleft strings attached.

That last part matters because a lot of products have taken them up on it. The README's own "Who's integrating Excalidraw" section lists: "Google Cloud • Meta • CodeSandbox • Obsidian Excalidraw • Replit • Slite • Notion • HackerRank • and many others". That's not a marketing slide — it's a list of other real products that embedded this specific drawing engine into their own UI instead of building their own sketchy-line renderer from scratch.

The mechanism: the sketch isn't drawn, it's generated

The hand-drawn look doesn't come from Excalidraw's own code. It comes from a dependency: Rough.js, listed in the packages/excalidraw/package.json manifest at version 4.6.4. Rough.js's own README describes it plainly: "Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style." It's a separate open-source project, maintained independently, with 21.2k stars of its own and its own MIT license.

Here's the actual mechanism: when Excalidraw needs to render a rectangle, it doesn't draw one clean rectangle and slap a texture over it. It hands the shape's coordinates to Rough.js, which recalculates the path with controlled randomness and redraws it from scratch, on every render.

Rough.js exposes that randomness as tunable parameters rather than a fixed filter:

• Roughness — how far the line strays from the "true" geometric path. Low values look nearly straight; higher values look scribbled.
• Bowing — how much curve gets added to lines that should otherwise be straight.
• Fill style — seven options: hachure (Rough.js's default diagonal-line fill), solid, zigzag, cross-hatch, dots, dashed, and zigzag-line. Individual styles expose their own settings too — hachure's angle and line spacing, for instance, are separate hachureAngle and hachureGap parameters.

That's the transferable idea: Excalidraw didn't design a hand-drawn font or a hand-drawn image set. It separated "the shape a user places" from "the path actually rendered," and put a randomization engine in between. The informality isn't decoration bolted onto a clean vector shape — it's the only way the shape is ever drawn.

Why that distinction is worth stealing

A static "sketch" skin — a wobbly SVG filter, a shaky font — looks hand-drawn once, then looks exactly the same, identically wobbly, in every diagram you ever make with it. It's still a template. Rough.js's approach means Excalidraw's diagrams never get a single canned "sketch effect." Every render pulls fresh randomness, so the tool doesn't quietly reveal its own repetition the way a filter does under close inspection.

If you're building anything that wants to feel informal, approachable, or "in progress" rather than finished and locked — a wireframe tool, a brainstorming canvas, a diagram embedded in a note-taking app — the lesson isn't "add a shaky filter." It's Excalidraw's actual bet: push the randomness into the rendering step itself, not the asset library.

The business model underneath the free tool

Excalidraw isn't funded by donations alone, and the README says so directly: "If you like the project, you can become a sponsor at Open Collective or use Excalidraw+." That's the standard two-track open-source model — a free, MIT-licensed core that anyone can self-host or embed (which is presumably how Notion, Obsidian, and Replit are using it), plus a separate hosted commercial product, Excalidraw+, for people who'd rather pay than run it themselves. Excalidraw+'s marketing site sits on a different domain than the GitHub project and wasn't reachable in this research session, so this piece doesn't state a price for it.

The honest gap: a stale tag next to a busy repo

Here's the part worth being skeptical about. The most recently tagged release is v0.18.1, dated April 21 — months before this piece was checked. But the commit history shows the opposite of an abandoned project: commits landing on the master branch as recently as September 28, most days carrying several commits apiece. The repo currently has 2.1k open issues and, more strikingly, 1,170 open pull requests sitting unmerged.

Put together, that gap reads less like neglect and more like a team that ships continuously to its own hosted app at excalidraw.com without bothering to cut a matching npm tag every time. That's a fine strategy for a hosted product, but it means anyone pulling the @excalidraw/excalidraw npm package for a self-hosted embed should check the actual commit they're pinned to, not assume the latest tag reflects the current state of the code. It's a different governance shape than Aider, an open-source project run largely by one developer — Excalidraw has more hands on deck, but also a backlog those hands haven't caught up to.

A 1,170-PR backlog against a public org roster of 12 listed members — 11 people plus one bot account — is also a legitimate maintenance-burden flag for anyone deciding whether to contribute a fix versus fork and patch it themselves.

What this generalizes to

The idea to steal isn't "make things look sketchy." It's narrower: if you want a product to feel less finished, less intimidating, or less like a locked-down template — the way Loop Habit Tracker's decaying score replaces a rigid streak counter, or the way Anki's FSRS replaced one fixed formula with a per-card model — don't fake the feeling with a static skin. Find the one computation you can inject controlled randomness or adaptivity into, expose the knobs (roughness, bowing, fill; retention percentage; decay rate) as parameters instead of hardcoded values, and let every render or every calculation redo the work fresh. Excalidraw's entire "hand-drawn" reputation rests on a 21.2k-star, <9 kB dependency doing exactly that, one rectangle at a time.