hub / github.com/Shitanshukumar607/Drawspace

github.com/Shitanshukumar607/Drawspace @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

82 symbols 152 edges 22 files 0 documented · 0% ● updated 7mo ago★ 43

Browse by type

⨍ Functions 62 ◇ Types & classes 20

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

Drawspace

A modern, interactive vector drawing application built with Next.js and Konva.

Features

Vector Tools: Create rectangles, ellipses, lines, and arrows with precision.
Freehand Drawing: Sketch freely on the canvas.
Shape Manipulation: Select, move, and transform existing shapes.
Customization: Adjustable tool settings via a dedicated sidebar.
Responsive Canvas: Automatically adapts to window size.

Tech Stack

Framework: Next.js 15 (App Router)
Library: React 19
Language: TypeScript
Canvas Engine: Konva / React-Konva
Styling: Tailwind CSS
State Management: Zustand
Icons: Lucide React

Getting Started

Clone the repository.
Install dependencies: bash npm install
Start the development server: bash npm run dev
Open http://localhost:3000 in your browser.

Extension points exported contracts — how you extend this code

FreeDrawingLine (Interface)

(no doc)

types/types.ts

ShapeRefRegistry (Interface)

(no doc)

components/CanvasShapeRenderers.tsx

PenProperties (Interface)

(no doc)

context/toolPropertiesStore.ts

CanvasState (Interface)

(no doc)

context/historyStore.ts

StateStore (Interface)

(no doc)

context/stateStore.ts

LineShape (Interface)

(no doc)

types/types.ts

browse all types & interfaces →

Core symbols most depended-on inside this repo

↓ 5 filesgetPointerPositionRelativeToStage

hooks/getPointerPosition.ts

↓ 5 filescreateShapeId

hooks/createShapeId.ts

browse all functions →

Shape

Function 62

Interface 20

Languages

TypeScript100%

Modules by API surface

components/CanvasComponent.tsx18 symbols

context/toolPropertiesStore.ts10 symbols

components/CanvasShapeRenderers.tsx10 symbols

types/types.ts5 symbols

hooks/DrawRectangleTool.ts5 symbols

hooks/DrawLineTool.ts5 symbols

hooks/DrawEllipseTool.ts5 symbols

hooks/DrawArrowTool.ts5 symbols

hooks/FreeDrawingTool.ts4 symbols

context/historyStore.ts3 symbols

components/ToolSettingsSidebar.tsx3 symbols

components/FloatingToolbar.tsx2 symbols

For agents

$ claude mcp add Drawspace \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

github.com/Shitanshukumar607/Drawspace @main

Drawspace

Features

Tech Stack

Getting Started

Extension points exported contracts — how you extend this code

Core symbols most depended-on inside this repo

Shape

Languages

Modules by API surface

For agents

Ask about this repo answers extend the page