excalidraw/rough — explained in plain English
Analysis updated 2026-07-25 · repo last pushed 2023-04-09
Build a whiteboard or brainstorming app where shapes look hand-drawn instead of rigid.
Add informal, sketch-style diagrams to an educational website to feel more approachable.
Create a wireframing tool where UI mockups look like quick paper doodles.
Sketch architecture or user-flow diagrams with a casual, collaborative aesthetic.
| excalidraw/rough | asker323/baksan-evakuator-landing | carolinacherry/cardia-survey | |
|---|---|---|---|
| Stars | 13 | 13 | 13 |
| Language | HTML | HTML | HTML |
| Last pushed | 2023-04-09 | — | — |
| Maintenance | Dormant | — | — |
| Setup difficulty | easy | easy | easy |
| Complexity | 2/5 | 1/5 | 2/5 |
| Audience | developer | developer | vibe coder |
Figures from each repo's GitHub metadata at analysis time.
Just include the library via npm or a script tag, no external dependencies or infrastructure required.
Rough.js is a lightweight graphics library that lets you draw shapes with a sketchy, hand-drawn appearance on the web. Instead of rendering perfectly clean lines and geometrically flawless circles, it adds a wobbly, organic quality to everything, making it look like someone quickly doodled it on paper. You can draw rectangles, circles, ellipses, lines, arcs, polygons, and even complex SVG paths, all with that casual sketched aesthetic. The library works with both Canvas and SVG, which are the two main ways browsers render graphics. At a high level, you tell it what shape to draw and where, and it applies algorithms that introduce controlled imperfections, slight deviations, wavy edges, and overlapping strokes. You can fine-tune the effect: a "roughness" setting controls how messy the lines look, a "bowing" setting warps the shape, and fill styles range from cross-hatching and zigzag patterns to solid colors. You can also adjust things like the angle and spacing of hatch lines. Anyone building a web app where a polished, corporate look would feel too stiff could benefit from this. Imagine a wireframing tool like Excalidraw (which is listed as a sponsor), a brainstorming app, a whiteboard product, or an educational site that wants diagrams to feel approachable and informal. A product team sketching architecture diagrams or user flows could use it to give their visuals a collaborative, whiteboard-like quality rather than a rigid, diagrammed feel. Diagramming tools like diagrams.net and Terrastruct also back the project. The library is notably tiny, under 9 kilobytes, so it adds almost no weight to a web application. Some of its core drawing algorithms were adapted from an earlier project called "handy" built for Processing, and the SVG arc conversion logic came from Mozilla's codebase. It's open source under the MIT license, so it's free to use in commercial projects.
A tiny JavaScript graphics library that renders shapes, rectangles, circles, lines, and more, with a sketchy, hand-drawn look instead of clean, precise lines. It works with both Canvas and SVG output in the browser.
Mainly HTML. The stack also includes JavaScript, Canvas API, SVG.
Dormant — no commits in 2+ years (last push 2023-04-09).
Free to use for any purpose, including commercial projects, as long as you keep the copyright notice.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly developer.
This repo across BitVibe Labs
double-check against the repo, no cap.