What is it?
What it is
A drawing toolbar component for React that provides seven specialized pens, an area-based eraser, and export capabilities to SVG or PNG.
Why it exists
To provide an opinionated, ready-to-use drawing interface for React applications that behaves like real physical pens (varying thickness based on speed or direction) without the complexity of building a custom drawing engine from scratch.
Who should use it
React developers needing a quick drawing canvas implementationDevelopers building whiteboarding or sketching featuresUI/UX designers prototyping interactive drawing componentsApp developers requiring SVG or PNG export functionality
Who should avoid it
Developers needing highly customizable drawing engines (use tldraw or Excalidraw instead)Developers not using React (requires React >= 18)Users needing complex vector manipulation beyond simple strokes
How it works
A quick walkthrough in plain English
How drawesome works
Step 1 of 3
You interact with it
Open drawesome, send a request, or connect it to your stack.
Features
Advantages
- Lightweight and fast – only React is required
- Highly customizable UI and behavior
- Built‑in export and download functions
- Clear separation of surface and toolbar for flexible layouts
- Supports multiple pen types with realistic behavior
- Area eraser allows precise editing
- Keyboard shortcuts improve workflow
- Open source with permissive MIT license
- No external dependencies reduces bundle size
Disadvantages
- Limited to React ecosystem – not usable in vanilla JS or other frameworks
- No advanced features like layers, shape tools, or text input
- Performance may degrade with many strokes or large canvases
- No built‑in undo/redo persistence across sessions (must store strokes manually)
- Requires manual handling of stroke data for persistence or collaboration
Installation
native
npm install drawesome
FAQ
How do I install Drawesome?
Run `npm install drawesome`. It requires React >=18 as a peer dependency.
How do I get the drawing out as an image or SVG?
Use the ref handle: `draw.current.toSvg()` for SVG, `draw.current.toPng(scale?)` for a PNG Blob, or `draw.current.download(name?, format?, scale?)` to save a file.
Can I customize which tools appear and their order?
Yes, pass the `tools` prop with an array of `PenId` values (e.g., `['pencil','marker','highlighter']`) to show only those tools in that order.
How does the eraser work in Drawesome?
The eraser removes area rather than whole strokes, letting you rub out part of a line while keeping the rest.
What keyboard shortcuts are available?
Each tool has a single‑key shortcut shown in its tooltip (E for eraser, [ and ] for size, ⌘Z/⇧⌘Z for undo/redo); holding Shift while drawing locks the stroke to the nearest of eight directions.
How can I make the toolbar adapt to narrow screens?
Use conditional props: change `placement` to 'left' on narrow screens and reduce the `tools` array and `controls` (e.g., hide undo, clear, opacity, custom) to fit a vertical toolbar.
Featured in Videos
YouTube tutorials and walkthroughs for drawesome
Alternatives
Similar projects ranked by category, topics, and text overlap.
