Open-source clothing brand mockup platform built with Next.js 14
Generate photorealistic garment mockups, manage your brand kit, build lookbooks, and export print-ready assets — without Photoshop.
Demo · Features · Stack · Quick Start · Roadmap
ThreadForge is a full-stack SaaS boilerplate for building clothing brand mockup tools. It ships with a Fabric.js canvas editor, multi-brand management, Stripe subscriptions, Cloudinary image storage, and Clerk authentication — all wired together and ready to deploy to Vercel.
Built for:
- 🧢 Streetwear and clothing brands that need fast, clean mockups
- 🛍️ Print-on-demand sellers (Printful, Printify, etc.)
- 🏷️ Fashion startups building their first lookbook
- 👩💻 Developers who want a production-ready Next.js SaaS starter with Stripe + Prisma
Screenshots and live demo coming soon. Star the repo to get notified.
- Drag-and-drop design placement on 100+ garment templates (t-shirts, hoodies, hats, joggers, jackets, and more)
- Fabric.js canvas with text, image, layer, and transform controls
- Real-time preview with photorealistic clothing templates
- Canvas state saved as JSON — restore and re-edit anytime
- Create unlimited brands under one account (Pro/Studio plans)
- Store logos, hex color palettes, and font choices per brand
- One-click brand switching when creating mockups
- Group mockups into seasonal drops or lookbook collections
- Shareable collection pages for buyers and wholesale clients
- Custom cover image per collection
- Export PNG, WebP, or PDF at any resolution (up to 6000px)
- Export history tracked per mockup
- Optimized URLs via Cloudinary CDN
- Free / Pro / Studio tiers via Stripe Checkout
- Per-plan limits on mockups, brands, and exports
- Stripe webhook handler for real-time subscription sync
| Layer | Technology | Why |
|---|---|---|
| Framework | Next.js 14 (App Router) | Server components, streaming, file-based routing |
| Language | TypeScript 5 | End-to-end type safety |
| Styling | Tailwind CSS + shadcn/ui | Utility-first + accessible headless components |
| Canvas | Fabric.js 5 | Mature, flexible HTML5 canvas for mockup editing |
| ORM | Prisma 5 | Type-safe PostgreSQL queries + migrations |
| Database | PostgreSQL | Relational, works with Neon / Supabase / Railway |
| Auth | Clerk | Drop-in auth with social login, orgs, webhooks |
| Storage | Cloudinary | Image upload, CDN, and on-the-fly transforms |
| Payments | Stripe | Checkout, webhooks, subscription management |
| Resend | Transactional email with React templates | |
| Deployment | Vercel | Zero-config Next.js deployment |
| State | Zustand | Lightweight client state for the canvas editor |
| Validation | Zod | Runtime schema validation for all API inputs |
threadforge/
├── CLAUDE.md # AI agent context (Claude Code / design tools)
├── .env.example # All required env vars with descriptions
├── .github/
│ ├── workflows/ci.yml # Lint + typecheck + build on every push
│ └── ISSUE_TEMPLATE/
└── apps/
└── web/ # Next.js 14 application
├── prisma/
│ ├── schema.prisma # Full data model
│ └── seed.ts # Garment template rows
└── src/
├── app/
│ ├── (auth)/ # Clerk sign-in / sign-up
│ ├── (dashboard)/ # Authenticated app
│ │ ├── mockups/ # Mockup grid
│ │ ├── brands/ # Brand kit management
│ │ ├── collections/ # Lookbooks
│ │ ├── editor/ # Canvas editor
│ │ └── settings/ # Account + billing
│ ├── (marketing)/ # Landing page, pricing
│ └── api/ # REST endpoints + Stripe webhooks
├── components/
│ ├── ui/ # shadcn/ui primitives
│ ├── editor/ # Fabric.js canvas + toolbar
│ ├── mockup/ # MockupCard, MockupGrid
│ ├── brand/ # BrandKit, ColorPalette
│ ├── template/ # TemplateGallery (filterable by category)
│ └── shared/ # UploadZone, Sidebar, Navbar
└── lib/
├── db.ts # Prisma singleton
├── cloudinary.ts # Upload + URL helpers
├── stripe.ts # Stripe client + plan definitions
├── validations.ts # Zod schemas for all inputs
└── utils.ts # cn(), slugify(), formatBytes()
User
├── Brand[] → logo, colors, fonts per clothing label
│ └── Mockup[] → canvas designs referencing a Template
├── Collection[] → lookbooks grouping multiple mockups
├── Export[] → download history (PNG / WebP / PDF)
└── Subscription → Stripe plan (FREE / PRO / STUDIO)
Template → seeded garment library (tees, hoodies, hats …)
├── imageUrl → Cloudinary URL of blank garment photo
├── maskUrl → compositing mask for design placement
└── designArea → JSON bounding box { x, y, width, height }
- Node.js 20+
- PostgreSQL — local, Neon (free tier), Supabase, or Railway
- Accounts (all have free tiers): Clerk · Cloudinary · Stripe
git clone https://github.com/zyadhajaji/threadforge.git
cd threadforgecp .env.example apps/web/.env.localOpen apps/web/.env.local and fill in all values. Every variable is documented in .env.example.
cd apps/web
npm install
npx prisma migrate dev # applies migrations + generates Prisma client
npx prisma db seed # seeds the garment template library
npm run dev # http://localhost:3000npm run typecheck # tsc --noEmit — run before every commit
npm run lint # ESLint
npx prisma studio # GUI database browser at localhost:5555
npx prisma migrate reset # wipe + re-migrate (dev only)- Prisma schema — User, Brand, Template, Mockup, Collection, Export, Subscription
- Fabric.js canvas editor components
- API routes — mockups, brands, upload, Stripe webhooks
- Cloudinary + Stripe + Clerk wiring
- Landing page + dashboard shell + CI pipeline
- Clerk webhook → sync new sign-ups to DB
- Editor page (
/dashboard/editor/[id]) — page wrapping the canvas components - Brands & Collections dashboard pages
- Stripe Checkout upgrade flow + billing settings
- Dark mode toggle
- AI-powered design placement suggestions
- Bulk mockup generation (one design × multiple colorways)
- Shopify integration — push mockups directly to product listings
- Printful / Printify integration
- Shareable lookbook public URLs
- Headless mockup generation API
Pull requests are welcome. For major changes, open an issue first to discuss what you'd like to change.
- Fork the repo
- Create a branch:
git checkout -b feat/your-feature - Commit your changes following the commit convention
- Open a pull request
MIT — free to use, fork, and build on.
Keywords: clothing mockup generator · t-shirt mockup tool · apparel mockup SaaS · fashion brand mockup · print-on-demand mockup · streetwear mockup · Next.js SaaS boilerplate · Fabric.js canvas editor · brand kit management · garment mockup · lookbook builder · mockup generator open source