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

> The website builder, portfolio, and client workflow platform for creatives

- Site: https://format.com
- Category: Website Builder & Creative SaaS
- Verdict: **Serious undertaking** (38/100 vibecodeable)
- Estimated effort: 4-6 weeks of dedicated development and debugging

## Verdict

Build a personal portfolio subset with static templates, or keep paying $10-15/mo for the full production SaaS. The single biggest catch is engineering the complex Flex Block visual editor and high-res media processing pipeline.

Format combines a visual page builder, a custom grid layout engine, secure client proofing galleries, heavy file-transfer infrastructure, and an e-commerce catalog into a single platform. While an AI coding agent will effortlessly scaffold the CRUD pages, blog, and standard theme layouts using Next.js, building a robust 'Flex Block' snap grid with free-form overlapping elements, alongside a multi-gigabyte media storage and transcoding pipeline, requires serious engineering effort and debugging. For personal use, paying $10-15/month is vastly more rational than spending weeks wrangling canvas math, object storage egress, and thumbnail generators.

### What you can't replicate

- Brand trust built over 16 years servicing tens of thousands of global creatives
- Institutional integration suite (Lightroom plugins, Weglot translation networks)
- Zero-friction customer success and onboarding experts

## What it does

Specialized website builder, portfolio hosting platform, and client workflow management tool tailored for photographers, filmmakers, illustrators, and designers.

### Core features

- Curated responsive portfolio themes
- Flex Block custom free-form drag-and-drop layout grid
- High-resolution image uploading and multi-resolution processing
- Private password-protected client proofing galleries
- Encrypted bulk client file transfers
- Digital contract builder and signing tracking
- Commission-free e-commerce store with product management
- Hosted video streaming up to 120 minutes
- Custom domain mapping and SSL security
- Advanced SEO page title, meta description, and alt text tools

## The business

### Pricing

- Basic: $10/mo — Start your creative career with essential pages and galleries.
- Pro: $12/mo — Build your creative business with storage, video, and store products.
- Pro Plus: $15/mo — Scale your creative enterprise with massive storage and advanced workflows.

Founded 2010.
Team size: 50-190.

## The hard parts

- Building a free-form Flex Block drag-and-drop grid editor with responsive scaling, coordinate math, and element overlapping
- High-resolution image ingestion pipeline with automatic thumbnail generation, lazy loading, and CDN edge distribution
- Secure encrypted password-protected client proofing and multi-gigabyte file transfer pipelines
- Video transcoding and adaptive bitrate streaming pipeline for hosted video minutes

## How to vibe code Format

### Prerequisites

- Node.js (free): Required runtime for modern full-stack JavaScript development
- GitHub (free): Source code repository and deployment bridge
- Cloudflare (free tier): Global edge hosting, serverless SQLite, and object storage for user media

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic reasoning for scaffolding complex layout editors and media pipelines
- Cursor: Ideal AI-native editor for refining the interactive drag-and-drop Flex Block grid components

### Stack

- Frontend: Next.js with Tailwind CSS
- Backend: Next.js Server Actions and API Routes
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: Stripe
- Other: Cloudflare R2 for high-resolution image and file transfer storage, UploadThing for seamless media ingestion

### Hosting

- Cloudflare (Hosting the Next.js frontend application and edge API routes): $0-5/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize a full-stack Next.js project with Tailwind CSS, configure Turso for SQLite data persistence, and set up better-auth for secure user authentication.

```
Create a new Next.js 16 project configured with TypeScript and Tailwind CSS v4. Set up Turso database client using `@libsql/client` and configure better-auth for email/password authentication. Create database tables for users, portfolio_sites, pages, portfolio_items, client_galleries, and store_products. Ensure robust connection pooling and provide an environment variable template file (.env.example).
```

2. **Portfolio Theme Engine & Public Rendering** — Build the dynamic portfolio rendering engine supporting curated themes, custom page creation, and public custom domain routing.

```
Build a dynamic theme rendering engine in Next.js that loads a user's portfolio configuration based on their custom domain or subdomain path. Implement at least three distinct layout themes (Grid, Vertical Scroll, Minimalist Split) using Tailwind CSS. Add a public navigation bar, responsive image galleries with lightbox zoom, and custom font selector supporting Google Fonts integration.
```

3. **Flex Block Visual Layout Editor** — Develop the advanced free-form drag-and-drop Flex Block layout editor with coordinate snap grid, scaling, and overlapping elements.

```
Implement an interactive 'Flex Block' visual page editor dashboard using React and a drag-and-drop library (or custom pointer events). Allow creators to add elements (images, text blocks, buttons, dividers) onto a responsive snap-to grid canvas. Support resizing, repositioning via coordinate tracking, and z-index overlapping. Save block positions and style configurations as structured JSON in the database and render them accurately on the public portfolio view.
```

4. **Media Pipeline & Cloudflare R2 Storage** — Implement high-resolution image uploads, automatic thumbnail generation, and secure file transfer pipelines using Cloudflare R2 object storage.

```
Integrate Cloudflare R2 object storage (via S3-compatible API) into the Next.js backend. Build an upload dashboard supporting high-resolution image ingestion with client-side compression and multi-resolution thumbnail generation. Create a secure client file-transfer module allowing creators to package and share password-protected zip archives up to 10GB with download tracking and expiration dates.
```

5. **Client Proofing Galleries & Contracts** — Build private password-protected client proofing galleries with image favoriting/proofing workflows and digital contract generation.

```
Develop a client workflow module featuring password-protected client proofing galleries. Clients must enter a secure passcode to access a private gallery where they can view proofs, heart/favorite images, and leave comments. Additionally, build a digital contract builder allowing creators to draft terms, collect client signatures via digital canvas pads, and track signing timestamps and status.
```

6. **Commission-Free E-Commerce Store** — Create an integrated digital and physical product storefront with inventory tracking and direct checkout flows.

```
Build an online store module enabling creators to list up to 1,000 products (physical items, services, or digital downloads). Implement a shopping cart drawer, order management dashboard, and Stripe Checkout integration for zero-commission direct payments. Include fulfillment status tracking and digital download delivery links upon successful purchase.
```

7. **SEO & Final Polish** — Implement robust SEO controls (page titles, meta descriptions, image alt text editing) and perform comprehensive end-to-end testing.

```
Add comprehensive SEO management tools to the dashboard allowing creators to edit page titles, meta descriptions, open graph tags, and image alt text for every portfolio page and blog post. Implement automated sitemap generation. Polish the entire user interface with loading skeletons, toast notifications, error boundaries, and mobile responsiveness checks across all creator and public views.
```

### Cost vs paying

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

- AI coding tools subscription: $20
- Custom domain (optional): $12/yr
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Cloudflare Workers & R2 storage: $0 - $5/mo
- Total: ~$5/mo

- Paying for the SaaS instead: $14 - $36/mo
- Build time: 40-60 hours
- AI tool credits: $20 (Claude Pro / Cursor Pro)
- Break-even: 2 months (if valuing time at $0)

## Sources

- [Format Official Homepage](https://www.format.com)
- [Format Pricing Page](https://www.format.com/pricing)
- [PitchBook Profile – Format (Toronto)](https://pitchbook.com/profiles/company/152917-81)
- [Tracxn Company Profile – Format](https://tracxn.com/d/companies/format.com)