React Sketch Canvas

A freehand React vector drawing component using SVG as canvas

React Sketch Canvas gives you a drawing surface that stores every stroke as SVG path data, so signatures, annotations, whiteboards, and review screens can be saved, replayed, scaled, and exported cleanly.

You render a canvas, pass the drawing props you care about, and build the surrounding toolbar in React. The canvas handles pointer input and stroke history; your app decides how drawing fits into the product.

Why SVG?

Traditional <canvas> drawing is pixel-based. That is useful for painting apps, but it can be limiting when you need to store strokes, scale drawings, or export clean results later.

React Sketch Canvas records each stroke as path data. You can load those paths back into the canvas, export them as SVG, or render the same drawing at different sizes without the blurry edges that come from bitmap scaling.

Explore the guides

Start with the smallest useful setup, then add the parts most production drawing surfaces need: a toolbar, undo history, input restrictions, image backgrounds, and export.

Installation

Install the package and render your first canvas.

Drawing & erasing

Switch modes from your own toolbar and choose how the eraser behaves.

History

Wire undo, redo, clear, and reset into your own controls.

Restricting pointer input

Limit drawing to mouse, touch, pen, or accept every pointer type.

Backgrounds

Draw on top of a URL or data URI image.

Exporting & saving

Produce PNG, JPEG, or SVG output, or save and reload path data.

Common use cases

Signature capture for forms, approvals, and consent flows.
Image annotation tools for screenshots, photos, documents, and maps.
Sketch pads for education, collaboration, and lightweight whiteboarding.
Review screens where a saved drawing should be visible but not editable.
Drawing inputs that must prefer a stylus, ignore touch, or support every pointer device.

Using AI assistants

If you are pairing with Claude, Cursor, Copilot, Codex, or any other LLM-powered editor, point it at the machine-readable docs so it pulls the right APIs the first time.

/llms.txt: site map of every docs page.
/llms-full.txt: the full documentation bundled into a single file.

See the AI assistants guide for tool-specific setup.

ReactSketchCanvas v8 was also developed using AI coding assistants. See the AI assistants guide for the project note and workflow references.