String Art Studio

Live demo: https://string-art-studio.vercel.app/

String Art Studio is a browser-based design workspace for building custom string-art patterns using nail placement, thread routing, and optional image guides. It streamlines creative prototyping by enabling precise layout controls, interactive thread styling, and export-ready artwork directly from the canvas.

Key Features

• Interactive canvas for placing and editing nails
• Thread builder for connecting nails into string-art paths
• Automatic nail distribution in circle or square layouts
• Image guide import with scale, opacity, position, and visibility controls
• Grid display, snap-to-grid, pan, and zoom for precise composition work
• Undo/redo history for iterative design refinement
• Export finished work as PNG, JPEG, or JSON
• Light/dark theme support and customizable background settings

Tech Stack

• React 18 + TypeScript
• Vite build tooling
• Tailwind CSS for styling
• Lucide React icon library
• Native HTML canvas rendering for artwork composition

Installation

npm install

Development

npm run dev

Open the local URL shown in the terminal to start designing string-art compositions.

Build

npm run build

Preview

npm run preview

Then open the preview URL shown in the terminal.