components / drawing-window

drawing-window.

floating, draggable, resizable paint window: brush/eraser, colors, undo/redo, zoom + pan, and canvas-size presets. save emits png(s) via onSave, or downloads.

open a window, draw, save to preview here.

installation
bunx @justin06lee/chrome@latest add drawing-window
props
nametypedefaultdescription
titlestring'drawing'
subtitlestring-
initialPosition{ x: number; y: number }{ x: 72, y: 120 }
initialSize{ width: number; height: number }{ width: 780, height: 720 }
activebooleantruehighlights the border and enables wheel-zoom.
zIndexnumber80
onClose() => void-
onFocus() => void-
savingboolean-controlled saving flag.
disableSavebooleanfalse
darkMappingbooleanfalsedraw in light colors remapped to a dark variant.
presetsDrawingPreset[]-
colorsstring[]-hex swatches; defaults depend on darkMapping.
brushSizesnumber[][4, 10, 18]
onSave(result: { dataUrl: string; darkDataUrl?: string }) => void | Promise<void>-omit to download the png instead.
classNamestring-