# How to Vibe Code Your Own Snappa (and Stop Paying for It) > Quick & Easy Graphic Design Software - Site: https://snappa.com - Category: Graphic Design SaaS - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 2-4 weeks of part-time work ## Verdict Build a personal subset for yourself, but keep paying if you rely on their template library and Buffer integrations. The core canvas loop, text formatting, and image filter sliders are straightforward to scaffold using modern frontend frameworks and Konva.js. However, assembling thousands of production-ready templates, setting up millions of royalty-free stock assets, and hosting a reliable ML background removal endpoint require significant upfront data engineering. ### What you can't replicate - Their exact library of 6,000+ curated professional templates - Official partnerships and seamless direct integrations with social schedulers - Decade-long organic traffic and established user trust ## What it does Cloud-based graphic design software enabling marketers, entrepreneurs, and content creators to quickly produce social media images, ad banners, blog headers, and infographics. ### Core features - Preset dimension selector for social media and ads - Drag-and-drop canvas with shapes, text styling, and typography controls - Image filters (blur, brightness, contrast, hue, saturation sliders) - Layer ordering, rotation, flipping, and crop tools - Asset picker for royalty-free stock photos and vectors - One-click background removal tool - Direct social media sharing and Buffer scheduling integration ## The business ### Pricing - Starter: Free — For casual creators with limited needs - Pro: $15 /mo — For solo marketers and entrepreneurs - Team: $30 /mo — For small marketing teams Founded 2015. Team size: Small boutique team. ## The hard parts - Sourcing, indexing, and serving millions of high-res stock photos and vector assets without high egress bills - Building a reliable one-click background removal pipeline requiring computer vision segmentation models - Curating and structuring thousands of professional templates as reusable JSON canvas objects - Maintaining accurate cross-platform dimension presets as social media specs frequently change ## How to vibe code Snappa ### Prerequisites - Node.js (free): Required runtime for building and running the full-stack web application. - GitHub (free): Version control and deployment pipeline source repository. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for scaffolding complex multi-file layouts and canvas state management. - Cursor: Ideal for fine-tuning CSS layouts, canvas interaction handlers, and UI responsiveness. ### Stack - Frontend: Next.js with Tailwind CSS and Konva.js for HTML5 canvas manipulation - Backend: Next.js API routes / server actions - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: none - Other: Unsplash API for stock photos, fal.ai for background removal inference ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints on the Hobby tier.): $0/mo - Cloudflare R2 (Storing user uploaded images, custom fonts, and exported graphics with zero egress fees.): $0-2/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure better-auth with SQLite via Turso, and set up project folder structures for components, canvas tools, and API routes. ``` Create a new Next.js 16 project with Tailwind CSS and TypeScript. Set up better-auth for email/password authentication backed by Turso SQLite. Create database tables for users, designs (storing canvas JSON state, dimensions, title, thumbnail URL), and templates. Configure environment variables for Turso and better-auth secret keys. Ensure clean directory organization separating app routes, components, and server actions. ``` 2. **Dashboard & Dimension Preset Selector** — Build the main user dashboard showing saved designs, a new design creation modal with categorized social media dimension presets (Facebook, Instagram, YouTube, etc.), and custom dimension inputs. ``` Build a dashboard page in Next.js listing the user's saved designs in a grid view with thumbnail previews, titles, and update timestamps. Add a 'Create Graphic' modal featuring clickable dimension preset categories (Social Media, Ad Banners, Blog Headers, Infographics) with pre-configured width and height values, alongside a custom dimension input form. Clicking a preset should initialize a new design record in the Turso database and redirect the user to the editor workspace route `/editor/[id]`. ``` 3. **Canvas Editor Workspace & Typography Controls** — Implement the core design workspace using Konva.js for object rendering, adding text elements with font pickers, size controls, color pickers, drop shadows, and rotation handlers. ``` Build the design editor workspace at `app/editor/[id]/page.tsx` using React-Konva or Konva.js. Render a centered canvas matching the design's dimension aspect ratio. Build a sidebar panel with tools for adding text layers, selecting from 5 standard Google Fonts, adjusting font size, color, letter spacing, line height, and text opacity. Implement text rotation handles and drag-and-drop repositioning directly on the canvas with real-time state synchronization to local React state. ``` 4. **Stock Photo Asset Library & Image Filters** — Integrate the Unsplash API to let users search and insert stock photos onto the canvas, and add photo filter controls for blur, brightness, contrast, and saturation using Konva image filters. ``` Add an asset picker sidebar tab to the editor that queries the Unsplash API for royalty-free stock photos with keyword search and pagination. When a user clicks a photo, load it onto the Konva canvas as a background or movable image object. Implement a photo properties adjustment panel featuring range sliders for blur, brightness, contrast, and saturation that apply real-time Konva filters to the selected image node. ``` 5. **Background Remover & Export Pipeline** — Integrate fal.ai for one-click background removal on selected images and build client-side canvas export functionality to download high-resolution PNG/JPEG files. ``` Implement a one-click background removal feature in the image properties toolbar. When clicked, send the selected image source URL to a Next.js server action that calls fal.ai's background removal model, receives the transparent PNG result, uploads it to Cloudflare R2 storage, and replaces the canvas image node source with the new transparent asset. Add an export dropdown menu in the header allowing users to export and download the current Konva canvas state as a high-resolution PNG or JPEG file. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant (Claude Pro / Cursor Pro): $20 - Total: $20 one-time **Ongoing costs (monthly):** - Vercel Hobby Hosting: $0 - Turso DB & Cloudflare R2: $0-2/mo - fal.ai Background Removal API usage: $2-5/mo - Total: ~$5/mo - Paying for the SaaS instead: $15/mo - Build time: 25-35 hours - AI tool credits: $20 - Break-even: 1-2 months ## Sources - [Snappa Official Website](https://snappa.com) - [Niche Pursuits - Christopher Gimmer Built Snappa to $1M ARR](https://www.nichepursuits.com/snappa-christopher-gimmer/) - [DomainSherpa - How a Startup Founder Negotiated and Purchased Snappa.com](https://www.domainsherpa.com/christopher-gimmer-snappa/)