Why Choose react-whiteboard: A Zero-Dependency Whiteboard for React

You're building a product that needs a whiteboard component. Maybe it's a teaching platform, a note-taking app, or a collaborative sketch pad. You search for React whiteboard libraries and find yourself facing an uncomfortable choice: heavy libraries with tons of dependencies, or lightweight ones that sacrifice features.

What if you didn't have to choose?

The Problem with Existing Solutions

When I started looking at whiteboard libraries, I was shocked by the size-to-features ratio. Here's what I found:

Excalidraw is fantastic—but 390 kB is like adding a full framework to your bundle. tldraw is polished—but it requires a commercial license for production use and adds 720 kB. react-sketch-canvas is tiny—but you get freehand strokes, period.

What if you wanted all the features and the minimal footprint?

Meet react-whiteboard

react-whiteboard is a lightweight infinite-canvas whiteboard component built specifically for embedding in React apps. At ~23 kB gzipped with zero runtime dependencies, it's small enough to not impact your lighthouse score, but feature-complete enough to power real applications.

What You Get

• 11 drawing tools: pen, highlighter, eraser, shapes (rect, ellipse, triangle), line, arrow, text, hand, and selection
• Vector scene: Every stroke is a selectable, editable, reorderable shape—not just pixels
• Pressure sensitivity: Apple Pencil, tablet stylus, or simulated from mouse speed (with tapering strokes)
• Rub-out eraser: Erase just part of a stroke, not whole shapes (great for fixing mistakes)
• Infinite canvas: Pan and zoom freely without losing work
• Undo/redo: 200-step history, including clear
• Export: PNG, SVG, JSON (save/load), or copy to clipboard
• Keyboard-first: Single-key tool shortcuts, Shift for constraints, arrow keys to nudge
• Touch & stylus: Pointer Events with coalesced sampling, two-finger pinch zoom
• Dark mode + English/中文 UI
• Autosave to localStorage

The Embedded-First Philosophy

Here's what makes react-whiteboard different from Excalidraw or tldraw: it's designed to be embedded.

Excalidraw and tldraw are standalone applications. They're incredible, but they're packed with features you might not need (images, diagrams, hand-drawn look, real-time collaboration). They're also hard to integrate into a larger app—their UX assumes they own the whole page.

react-whiteboard assumes the opposite:

• Drop it into a React component with a single line
• Control it via ref methods (getShapes(), setShapes(), exportPng())
• Embed styling options (colors, fonts, stroke widths)
• Listen for changes via onChange callback
• Toggle features on/off (keyboard shortcuts, wheel scroll, menu, specific tools)

Example: A teaching platform

import { Whiteboard } from '@inchill/react-whiteboard'; export function AnnotationBoard() { return ( <Whiteboard tools={['pen', 'highlighter', 'eraser', 'select']} // Only what students need captureWheel={false} // Don't interfere with page scroll storageKey="lesson-123" // Auto-save per lesson /> ); } 

That's it. The board fills its parent container, auto-saves to localStorage, and works with keyboard and touch.

Why This Matters

Size Matters

23 kB vs. 390 kB is more than just a number. It's:

• Faster first paint (especially on mobile)
• Fewer bundle analysis warnings
• No debate with your ops team about third-party dependencies
• Better Core Web Vitals

Zero Dependencies

No jQuery, no D3, no image processing libraries. Just React (18+) and Canvas.

This means:

• Smaller attack surface for security audits
• No dependency conflicts with your other libraries
• Predictable behavior (you own all the code)
• No waiting for bug fixes from maintainers of 31 transitive dependencies

Embedded-First Design

You're not fighting a standalone app to fit it into your UI. The component is designed to play nicely with others:

• Controlled props for theme, locale, tools, shortcuts
• Refs for imperative control (perfect for "export and upload" flows)
• onChange callback for integration with your state management
• Granular captureWheel and globalShortcuts options for embedding in scrolling pages

It's Actually Complete

This isn't a toy. It has:

• Proper hit-testing for fast selection on complex drawings
• Path smoothing for tablet pressure simulation
• Multiline text with proper font measurement
• Partial eraser (erase part of a stroke, not the whole shape)
• Constrained drawing with Shift (straight lines, perfect squares)
• Undo history with serialization
• TypeScript throughout, including the public API

When to Use Each Option

Pick react-whiteboard if:

• You're embedding a whiteboard into a larger product (SaaS, EdTech, note-taking)
• You want pressure-sensitive pen and vector shapes, but don't need images or hand-drawn styling
• You care about bundle size and predictability
• You want MIT licensing with no surprises
• You're building for React and are comfortable with a focused, opinionated tool

Pick Excalidraw or tldraw if:

• You need a standalone diagramming tool your users can use for complex flowcharts
• You need image support or hand-drawn aesthetics
• You need real-time collaboration out of the box
• You're okay with a larger bundle (the features justify it for your use case)

Pick react-sketch-canvas if:

• All you need is freehand drawing, nothing else

How to Get Started

npm install @inchill/react-whiteboard 

import '@inchill/react-whiteboard/style.css'; import { Whiteboard } from '@inchill/react-whiteboard'; export default function App() { return ( <div style={{ height: '100vh' }}> <Whiteboard /> </div> ); } 

Then try:

• Draw with your pen/mouse (P key)
• Use highlighter (M key)
• Select and move shapes (V key)
• Undo with Ctrl/⌘ Z
• Export to PNG via the menu
• Zoom with Ctrl/⌘ + or mouse wheel

Check out the live demo or read the full docs on GitHub.

The Tradeoff

There's one thing react-whiteboard doesn't do: images and hand-drawn styling. If your use case needs realistic whiteboard look (sketchy lines, imperfect shapes), Excalidraw does that better. If you need users to drag photos into their diagrams, tldraw is the answer.

But if you want a complete, fast, zero-dependency drawing canvas you can embed into your app? react-whiteboard is built for you.

Have you used react-whiteboard? What did you build? Drop a comment—I'd love to hear about it.

Try it now → · GitHub → · npm →