Slipmatz Designer
Nuxt 4 single-page experience for creating custom slipmat artwork. Users pick a vinyl template, layer text/images/shapes on a circular Fabric.js canvas, generate a polished preview, and export both a web-friendly and production-ready PNG (e.g. 12" @ 300 DPI ⇒ 3600×3600 px).
✨ Features
- Template presets for popular vinyl diameters with bleed & safe-zone guides
- Fabric.js-powered editor: drag, scale, rotate, and stack elements inside a clipped circular canvas
- Tools for adding text, circles, rectangles, and uploading artwork
- Live preview card with instant web-resolution snapshot
- One-click export that produces both preview and print PNGs and offers direct downloads
🚀 Quick Start
npm install
npm run dev
Visit http://localhost:3000 to start designing.
🛠️ Production Builds
npm run build # compile client + server bundles
npm run preview # optional: preview the built output
Nuxt outputs the server bundle into .output/. You can serve it with node .output/server/index.mjs or deploy through your preferred Node hosting provider.
🧩 Export Workflow
- Choose a slipmat template to match the order (bleed/safe-zone update automatically).
- Compose the design with the toolbar tools—the canvas enforces a circular clip.
- Click Generate Files to render both preview and print PNGs.
- Use the download buttons to retrieve the assets:
- Web preview: 1024×1024 PNG suitable for the storefront and checkout review.
- Print-ready PNG: Exact template resolution (e.g. 3600×3600 for a 12" slipmat at 300 DPI) for production.
High-res exports remain client-side (no upload yet). Wire the exportDesign / productionBlob values into your backend to submit orders.
📦 Tech Stack
- Nuxt 4 + Vite
- Fabric.js 6 for canvas editing
- Tailwind CSS (via
@tailwindcss/vite) for styling utilities
🧭 Next Ideas
- Persist projects (auth + cloud storage)
- CMYK color profile previews & bleed handling
- 3D platter preview using Three.js
- Admin dashboard for incoming print jobs
Contributions & ideas are welcome—have fun crafting vinyl eye candy! 🎛️