Menu

1 / 2

How I Built a Whiteboard App with 3 Dependencies

DEV Community·maomaoguai·6 months ago
#Z9z4Gb4K
#react#typescript#opensource#canvas#drawing
Reading 0:00
15s threshold

The Problem

Every whiteboard app I tried wanted me to sign up, sync to the cloud, or load 2MB of JavaScript. I just wanted a blank canvas.

The Solution

MindNotes Pro — a drawing app with 3 production dependencies:

react, react-dom, zustand

Enter fullscreen mode

Exit fullscreen mode

That's it. No Redux. No styled-components. No axios. No lodash.

Try it now →

Architecture

The drawing engine lives in a single Canvas.tsx file (~600 lines). It uses the Canvas API directly — no drawing library. State is managed by 3 small Zustand stores:

useDrawingStore — strokes, shapes, tools, undo/redo, localStorage persistence

useViewStore — zoom and pan

useThemeStore — dark/light theme with system detection

Key Technical Decisions

1. Canvas API over SVG

Canvas gives us hardware-accelerated 2D drawing and pixel-perfect control. SVG would have been easier for hit testing, but Canvas handles thousands of strokes without DOM overhead.

2. Zustand over Redux

Zustand is under 1KB and needs no boilerplate.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.