Games & Creative2025
SolidJS Draw
Project info
Tech stack
SolidJSGraphicsTool
Key features
- Vector tools: rectangle, circle, line, arrow, freehand, text
- Full properties panel (stroke, fill, opacity, radius, alignment)
- Layers, multi-selection and context menu
- Command palette (⌘K) and version history
- PNG / SVG / PDF export — plus export as a SolidJS component
- Responsive: compact mobile view with bottom toolbar
- Fine-grained SolidJS signal reactivity (high performance)
About the project
SolidDraw is a vector drawing / whiteboard editor built as a technical demo in SolidJS — create, manipulate and export vector shapes through a smooth, highly reactive interface, in the spirit of Excalidraw.
It offers an infinite canvas with shapes (rectangle, circle, line, arrow, freehand, text), a full properties panel (colors, stroke width, opacity, radius, alignment), layer management, a command palette (⌘K), history, and PNG/SVG/PDF export — down to exporting as a SolidJS component. Everything is responsive, with a compact mobile view.
Under the hood it is a playground for SolidJS fine-grained signal reactivity: rendering stays smooth even with many objects on the canvas. Built with SolidJS + TypeScript and Vite.
Gallery
1 / 7
Next project
Scrapper Config
View case study