roughjs.com

What is it

Rough.js is a lightweight JavaScript graphics library, noted in the text as being under 9kB gzipped. Its core purpose is to draw sketchy, hand-drawn-like graphics on the web. It is not a full-fledged charting library or whiteboard product, but rather a lower-level drawing library suitable for embedding into frontend applications to generate visual elements with a hand-drawn feel.

Core Capabilities

Functionally, Rough.js supports drawing lines, curves, arcs, polygons, circles, and ellipses, as well as SVG paths. Rendering targets cover both Canvas and SVG: you can draw directly on a canvas via rough.canvas, or generate SVG nodes via rough.svg to append to the page. Style controls are quite extensive, supporting parameters like fill, stroke, strokeWidth, roughness, bowing, hachureAngle, and hachureGap. Fill styles include hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed, and zigzag-line, which is sufficient to cover common sketchy graphic needs.

Open Source, API & Documentation

The project uses the MIT License, making it suitable for commercial project integration and custom development. Installation is via npm install --save roughjs, and it is used with import rough from 'roughjs'. The text provides code examples for rectangles, circles, ellipses, lines, fills, and SVG paths, resulting in a low barrier to entry; however, the full API requires visiting GitHub, and the current text does not demonstrate TypeScript support, framework adaptation, or complex interaction capabilities.

Pricing & Support

Rough.js is a free and open-source project; the text mentions no paid versions, enterprise editions, or SLAs. The project supports developer sponsorship via GitHub Sponsors or Open Collective. Names like Excalidraw, diagrams.net, Terrastruct, and SheetJS appear in its sponsorship and ecosystem, indicating that its hand-drawn style capabilities are highly adaptable for whiteboards, charts, and graphical tools.

Pros, Cons & Who is it for

Pros include its small size, straightforward API, dual Canvas/SVG support, and distinct visual style, making it particularly suitable for whiteboards, flowcharts, educational presentations, graphics editors, and sketchy charts. The limitations are also clear: it only handles drawing and does not provide layer management, collaboration, drag-and-drop editing, chart semantics, or enterprise support. The text provides no information regarding accessibility from China; actual availability requires testing access to npm and GitHub documentation. If affected by network issues, alternatives like native Canvas/SVG APIs, D3.js, Paper.js, p5.js, or Excalidraw-related solutions can be considered.