# How to Vibe Code Your Own Stencil (and Stop Paying for It)

> Fast graphic design and social media image creation for marketers and bloggers

- Site: https://getstencil.com
- Category: Graphic Design SaaS
- Platforms: Web app, Browser extension
- Verdict: **Solid side project** (75/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a personal subset for yourself, but keep in mind that replicating the massive licensed stock asset library is impractical.

The core visual editor loop using Fabric.js or Konva.js with Next.js and Tailwind CSS is quite straightforward to bootstrap with an AI coding agent. However, sourcing and paying for millions of commercial stock photos and icons yourself ruins the economics, making a personal clone viable only if you hook up free APIs or your own local image folders.

### What you can't replicate

- Commercial distribution licenses for millions of premium stock photos and vector icons
- The exact legacy user base and third-party integrations (Buffer, WordPress plugin ecosystem)

## What it does

Stencil was a streamlined cloud graphic design SaaS tool built for speed, allowing users to create social media graphics, ad banners, and quote cards using templates, stock photos, and custom fonts.

### Core features

- HTML5 Canvas / SVG manipulation editor interface
- Pre-sized templates for social media platforms
- Stock photo and vector icon search library integration
- Google Fonts integration and custom typography management
- Image export (PNG, JPEG) and local download
- Browser extension for capturing web snippets to design with

## The business

### Pricing

- Free: $0/mo
- Pro: $15/mo

Founded 2013.
Team size: Small-to-mid team.

## The hard parts

- Licensing, caching, and serving millions of third-party stock photos and vector icons without massive storage and egress bills
- Implementing performant HTML5 canvas text wrapping, resizing, and filters
- Maintaining browser extension integrations across Chrome and Firefox extension store updates

## How to vibe code Stencil

### Prerequisites

- Node.js (free): Required runtime for building and running the Next.js full-stack web application.
- GitHub (free): Version control and deployment pipeline integration.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic coding tool for scaffolding the Next.js canvas editor and database models.
- Cursor: Ideal AI-native editor for refining complex HTML5 Canvas interactions and UI panels.

### Stack

- Frontend: Next.js with Tailwind CSS, shadcn/ui, and Fabric.js for canvas rendering
- Backend: Next.js API routes / Server Actions
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK, Unsplash API for stock photos

### Hosting

- Cloudflare (Hosting static frontend assets, edge routes, and R2 object storage for user-uploaded background images): $0-5/mo

### Build guide

1. **Project Scaffolding and Database Setup** — Initialize the Next.js full-stack repository with Tailwind CSS, configure better-auth with SQLite via Turso, and set up shadcn/ui component primitives.

```
Scaffold a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install shadcn/ui foundational components (button, dialog, dropdown-menu, tabs, input, slider). Configure better-auth for local email/password authentication backed by a Turso SQLite database client over libSQL. Create database migrations for users, saved_designs (storing canvas JSON state), and user_uploads. Ensure clean directory structure with a dedicated lib/db.ts and auth.ts.
```

2. **Canvas Editor Core with Fabric.js** — Build the core image creation workspace utilizing Fabric.js inside a responsive React component wrapper with preset social media dimensions.

```
Create a React component named CanvasEditor.tsx wrapping Fabric.js. Implement canvas initialization with preset social media dimensions (Instagram Square 1080x1080, Facebook Post 1200x630, Twitter Post 1200x675, Pinterest Pin 1000x1500). Provide toolbar controls for adding text boxes with customizable Google Fonts, font size, color, and alignment, adding rectangle/circle background shapes, and uploading custom foreground images. Ensure proper cleanup on unmount and responsive scaling to fit the browser viewport.
```

3. **Stock Photo and Icon Library Integration** — Integrate external asset search panels allowing users to query and inject stock photos and vector icons directly onto the canvas.

```
Build a sidebar component with tabs for 'Photos' and 'Icons'. For the Photos tab, connect to the Unsplash API via a backend proxy route to search and display stock photos in a grid; clicking a photo should set it as the canvas background image. For the Icons tab, provide a searchable vector icon drawer using Lucide or an equivalent SVG icon set that inserts vector paths onto the active canvas workspace. Implement loading states and error handling for API failures.
```

4. **Template Selection and Preset Layouts** — Implement pre-designed layout templates that instantly load background images, headline typography, and accent boxes into the canvas workspace.

```
Implement a 'Templates' modal and sidebar section containing predefined graphic design templates (quote cards, promo banners, blog headers). Each template definition should be stored as a JSON configuration specifying background fill, image URLs, and pre-positioned Fabric.js text objects. Clicking a template should prompt the user to replace or load the design state into the active CanvasEditor instance.
```

5. **Design Export and Storage Pipeline** — Enable users to save their design projects to their account and export high-resolution PNG or JPEG files directly from the canvas.

```
Add 'Save Design' and 'Download' action buttons to the editor header. The 'Save Design' button should serialize the active Fabric.js canvas state into JSON and persist it to the saved_designs table via a Server Action, capturing a base64 thumbnail preview. The 'Download' button should trigger client-side rendering to export the canvas as a high-resolution PNG or JPEG file with custom download naming.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom Domain (optional): $12/yr
- AI Coding Assistant (Cursor / Claude Pro): $20
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Cloudflare / Turso Free Tiers: $0/mo
- Total: ~$0/mo

- Paying for the SaaS instead: $15/mo
- Build time: 25-35 hours
- AI tool credits: $20
- Break-even: Never (built for personal learning and custom utility)

## Sources

- [Stencil Official Shutdown Announcement](https://getstencil.com)
- [SelectHub Stencil Overview & Pricing](https://www.selecthub.com)
- [Tracxn GetStencil Company Profile](https://tracxn.com)