Guides

Installation

Install react-sketch-canvas and render your first canvas.

react-sketch-canvas is a single npm package. It renders an SVG drawing surface, so there is no extra canvas runtime or browser plugin to configure.

Install

npm install react-sketch-canvas

yarn add react-sketch-canvas

pnpm add react-sketch-canvas

Quick start

Import the component

import {  } from "react-sketch-canvas";

Render it with the props you care about

Width, height, stroke color, and canvas color are the most common starting props.

App.tsx

export function () {
  return (
    <
      ="100%"
      ="150px"
      ="transparent"
      ="#a855f7"
    />
  );
}

Try it

Drafting Canvas Workspace

App.tsx

import { Pencil } from "lucide-react";import { ReactSketchCanvas } from "react-sketch-canvas";export default function App() {	return (		<div className="not-prose flex flex-col gap-3 w-full">			{/* Header display */}			<div className="flex items-center gap-2 text-fd-muted-foreground select-none">				<Pencil className="w-3.5 h-3.5 text-fd-primary animate-pulse" />				<span className="font-display text-sm font-bold tracking-tight">					Drafting Canvas Workspace				</span>			</div>			{/* Canvas Workspace */}			<div className="relative overflow-hidden rounded-lg border border-fd-border aspect-video min-h-[200px] shadow-sm">				<ReactSketchCanvas					width="100%"					height="100%"					canvasColor="transparent"					strokeColor="var(--color-fd-primary)"				/>			</div>		</div>	);}

What's next

Build a toolbar that switches between drawing and erasing. See Drawing & erasing.
Wire undo, redo, clear, and reset to your own controls. See History.
Export the drawing or save it for later. See Exporting & saving.

Drawing & erasing

Switch between drawing and erasing from your own toolbar.

On this page

Install Quick start Import the component Render it with the props you care about Try it What's next