Apparel Designer

T-shirt customization editor with drag-and-drop design, background removal, and high-resolution export.

Features

• Canvas Editor — React-Konva based drag/drop/resize/rotate for images and text
• Background Removal — Client-side AI using Transformers.js (RMBG-1.4, 8-bit quantized)
• Photo Pre-Editor — Filerobot integration for crop, filters, and adjustments
• Stickers — 140+ emoji stickers across 6 categories
• Text Tool — 20 Google Fonts, sizes, and colors
• Templates — 8 pre-designed templates across various categories
• Undo/Redo — Full history with keyboard shortcuts (Ctrl+Z / Ctrl+Shift+Z)
• High-Res Export — 4500×4500px PNG @ 300 DPI (15"×15" print size)
• PWA Support — Offline caching for models, fonts, and assets

Tech Stack

Layer	Choice
Frontend	React 19, Vite, react-konva 19, Konva 10
Background Removal	@huggingface/transformers, RMBG-1.4 (q8)
Photo Editor	Filerobot Image Editor
PWA	Workbox via vite-plugin-pwa
Server	Express, Multer, Sharp
Export	node-canvas (4500×4500 server-side render)

Getting Started

# Install dependencies
npm install

# Optional but recommended for accurate exports: fetch the Google Fonts the
# editor uses, so node-canvas can render them server-side. Skipping this means
# exports fall back to whatever fonts the host system provides.
npm run fetch-fonts

# Start development (client on :3000, server on :3001)
npm run dev

# macOS Sharp fix is built into the dev script
# On Windows use:
npm run dev:win

Docker

docker compose up --build

Project Structure

apparel-designer/
├── server.js              # Express API (upload, export, health)
├── vite.config.js         # Vite + PWA config
├── package.json           # Single package — all deps
├── index.html             # Entry HTML with Google Fonts
├── scripts/
│   └── fetch-fonts.mjs    # Downloads TTFs for server-side rendering
├── src/
│   ├── main.jsx           # React entry + SW registration
│   ├── App.jsx            # Root layout (sidebar / canvas / properties)
│   ├── App.css
│   ├── index.css          # Design tokens + layout styles
│   ├── components/
│   │   ├── canvas/        # DesignCanvas, ImageElement, TextElement, TShirtSVG, TemplateLayer, SlotPlaceholder
│   │   ├── sidebar/       # Sidebar, UploadTab, StickersTab, TextTab, TemplatesTab, BackgroundRemovalButton
│   │   ├── panels/        # LayersPanel, PropertiesPanel
│   │   ├── editor/        # PhotoPreEditor (Filerobot wrapper)
│   │   ├── PWAInstall.jsx
│   │   └── OfflineIndicator.jsx
│   ├── hooks/             # useDesignEditor, useBackgroundRemoval, useExport, useTemplate
│   └── constants/         # fonts, stickers, templates
├── public/                # Favicon, PWA icons
├── fonts/                 # Server-side TTFs (gitignored, populated by fetch-fonts)
├── uploads/               # User uploads (gitignored)
├── exports/               # Exported PNGs (gitignored)
├── docs/                  # Bug log, suggestions, change notes, template schema
├── Dockerfile
└── docker-compose.yml

API Endpoints

Method	Endpoint	Description
GET	/api/health	Health check
POST	/api/upload	Upload image (20MB max, JPEG/PNG/WebP)
POST	/api/export	Export design as 4500×4500 PNG
GET	/api/download/:filename	Download exported file

License

MIT