Drawesome is a drawing toolbar for React. Seven pens, an eraser, SVG and PNG export, and nothing to install beyond React. Two lines to drop into an app.

Placeholder copy goes here. Use this paragraph to explain why the project exists, what problem kept coming up, and the moment you decided to stop rebuilding it from scratch and turn it into something reusable instead.

A second paragraph can describe the part you spent the most time on.¹ Talk about the interaction you obsessed over, the trade-off you made, and how each state of the interface flows into the next one without a hard cut.

npm install drawesome

It fills its parent container. Give the wrapper a height.

import { Draw } from 'drawesome'import 'drawesome/styles.css'<div style={{ height: 400 }}>  <Draw /></div>

Describe how the tools behave here. A sentence or two about what makes each one feel like the real thing, and the small detail that took the longest to get right. This is a good spot for the line people quote back to you.

Follow it with a shorter paragraph that adds one more detail, so the section ends on something concrete.

Explain your defaults and why you chose them. The goal is that the first thing anyone tries already looks right, and everything below is optional.²

Pick the tools and the order they sit in, and switch off anything you don't need:

<Draw  tools={['pencil', 'marker', 'highlighter']}  controls={{ undo: false, clear: false }}/>

theme takes light, dark or auto, which follows the system setting. The bar above is on auto.

placement puts the bar on an edge, and inset and align fine-tune where it sits. motion sets how it arrives and leaves. draggable lets people move it. swatches swaps in your own palette.

Two props change how the bar is drawn: look="studio" lights the tools like objects, and depth sets how much shadow it casts. The demo above uses studio.

The canvas is yours. Give background a colour, or set it to transparent to let whatever is behind it show through, which is how the demo sits on graph paper.

<div className="your-paper">  <Draw background="transparent" /></div>

On narrow screens the default toolset runs off both edges, so under 680px the demo moves the bar to the left edge and trims the tools:

<Draw  placement={narrow ? 'left' : 'bottom'}  tools={narrow ? ['pencil', 'pen', 'marker', 'highlighter', 'brush'] : undefined}  controls={narrow ? { undo: false, clear: false, opacity: false, custom: false } : undefined}/>

controls switches size and opacity off separately. Turn both off and the button that opens them goes too.

chrome={false} removes the toolbar and leaves only the surface. DrawSurface, Toolbar and the useDrawing hook are exported separately if you'd rather assemble it yourself.

To get the drawing out, put a ref on it. toSvg() returns a string, toPng() returns a blob, and download() saves either one.

await draw.current.download('sketch', 'png', 2)

Every pen has a keyboard shortcut, shown in its tooltip. E for the eraser, [ and ] for size, ⌘Z and ⇧⌘Z for undo and redo. Hold Shift to lock the stroke to eight directions.

Close with a short reflection. What the name promises, what it does today, and why you'll keep reaching for it the next time a project needs it.