Skip to content

Kanavice Studio

Cover image for Kanavice Studio
View Project
React TypeScript Vite Embroidery Cross-stitch Design Tool

Kanavice Studio is a browser-based planning tool for positioning cross-stitch and embroidery patterns on fabric before starting physical work. It is especially useful for prayer rugs and other large surfaces where centering, spacing, and multiple-pattern placement are difficult to judge by eye.

The problem

Trial and error on real fabric is slow, while alignment or scale problems are often noticed only after work has started. General-purpose design tools do not model fabric dimensions, thread density, grid alignment, or the specific spacing decisions used in cross-stitch workflows.

The project creates a dedicated digital planning surface where these decisions are measurable and reversible.

Main capabilities

Placement and alignment

  • Add, duplicate, select, and move multiple patterns
  • Align against canvas edges, centers, or other patterns
  • Use nine-point canvas alignment and equal-distribution controls
  • Mirror horizontally or vertically, lock elements, and manage layer order
  • Temporarily bypass snapping with Shift

Editing experience

  • Zoom, fit-to-view, and touch pinch gestures
  • A 50-step undo and redo history
  • Automatic localStorage persistence
  • Validated JSON import and export
  • Selection bounds and total coverage calculations

Planning feedback

The interface reports spacing, dimensions, and occupied area as the layout changes. It warns when a pattern is larger than the configured fabric and provides guides that make centering and balanced margins easier to evaluate.

Technology

  • React 19
  • TypeScript
  • Vite
  • Tailwind CSS 4
  • Lucide React

The desktop workflow is the primary target, while tablet interaction remains supported. The design goal is to replace imprecise visual trial and error with an editable preview grounded in dimensions, spacing, and alignment.