KuroSketch.Preview.720p.mp4
A minimal sketching app built from scratch…
not to copy tools like Excalidraw —
but to understand how they actually work.
Lines, shapes, text, undo/redo, pan, zoom…
all handcrafted with Canvas + logic + a lot of learning moments 💭
This project is less about being “feature-heavy”
and more about building a real drawing engine, step by step.
Most sketch apps hide the hard parts.
KuroSketch does the opposite.
Mouse input → geometry → canvas rendering → state history
no magic… just fundamentals.
If you like learning by building,
this one’s for you.
- React
- TypeScript
- Vite
- HTML Canvas API
- Rough.js (for that hand-drawn feel ✍️)
- Tailwind CSS (UI polish & theming)
- Motion (for a little bit UI animations)
Simple stack. Deep learning.
- ✏️ Freehand pencil tool
- 📏 Line tool
- ⬛ Rectangle & ⚪ Circle tools
- 🔤 Text tool
- 🖱️ Select & move elements
- 🧽 Eraser
- ↩️ Undo / Redo system
- 🤏 Pan & Zoom canvas
- 🌗 Light / Dark theme toggle
- 🎨 Theme-aware rendering (existing drawings update on theme change)
- 🧠 Semantic color system (no hardcoded stroke colors)
- 🖐️ Improved pointer system (mouse + touch support)
- ⌨️ Keyboard shortcuts
Everything rendered manually on canvas…
no SVG shortcuts 👀
The theme system was redesigned to be fully dynamic and scalable:
- Elements no longer store raw colors
- Instead, they use semantic color roles (e.g. defaultStroke)
- Colors are resolved at render time
This allows:
→ Instant theme switching (even for old drawings)
→ Cleaner architecture (no mutation of stored elements)
→ Easy future support for color customization
Also includes:
- Soft UI palette (no pure black/white)
- Lavender-based accent system
- Theme-based shadows & hover states
This project followed a build-and-learn approach:
Setup → Canvas rendering → Element models → Tools → History system → Pan & zoom → UI
Then… polish ✨
Each feature was added only after understanding
why it should exist and how it works internally.
No rushing. No skipping fundamentals.
- How canvas rendering actually works (and why redraws matter)
- Managing complex mouse interactions without losing sanity
- Geometry basics (hit detection is sneaky…)
- Designing a clean undo/redo history system
- Separating tools, elements, and state
- Building a theme system using semantic roles instead of fixed values
- Debugging weird coordinate bugs caused by pan & zoom 😵💫
Most importantly…
Building from scratch teaches you things tutorials never mention.
This is where KuroSketch can grow 👀
Some ideas:
- 🧲 Multi-select & group elements
- 🎯 Better hit detection & resizing handles
- 🖼️ Export as PNG / SVG
- 💾 Save & load sketches
- 🧩 More shapes (arrows, diamonds, etc.)
- 🖌️ Stroke & color customization
- 📱 Advanced mobile gestures
KuroSketch is a solid base.
From here… it can evolve into something really powerful.
# clone the repo
git clone https://github.com/your-username/kurosketch.git
# install dependencies
npm install
# start dev server
npm run dev
Open http://localhost:5173
and start sketching ✨