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

> Simple, free, fully responsive one-page sites for pretty much anything

- Site: https://carrd.co
- Category: Website Builder
- Verdict: **Solid side project** (75/100 vibecodeable)
- Estimated effort: 3-4 weeks of focused development

## Verdict

Build a personal subset for yourself, but keep paying if you want production-grade uptime and automated custom domain SSL provisioning.

Replicating the core visual editor and static export engine is an engaging challenge for a solo developer utilizing AI coding agents. However, building the multi-tenant custom domain routing with automated Let's Encrypt certificate issuance involves complex infrastructure automation that will consume hours of debugging. Since the real product costs under $20/year for pro features, building this is purely an exercise in software craftsmanship rather than an economic shortcut.

### What you can't replicate

- The massive library of professionally designed templates
- The viral distribution network built over a decade
- Zero-friction automated SSL and custom domain infrastructure

## What it does

Minimalist SaaS platform designed for building and hosting responsive, single-page websites, landing pages, and personal portfolios.

### Core features

- Visual drag-and-drop or block-based editor interface
- Pre-made template library with structural elements
- Responsive layout engine across breakpoints
- Static site generation (compiling pages into HTML/CSS/JS assets)
- Form handling and webhook integration
- Dashboard for site management and trash folders

## The business

### Pricing

- Free: $0 / year
- Pro Lite: $9 / year
- Pro Standard: $19 / year

### Funding

$0 raised.

Founded 2016.
Team size: 2-4.

## The hard parts

- Building a reliable block-based visual editor that outputs pristine responsive CSS
- Automated compilation pipeline generating clean, self-contained static assets
- Programmatic custom domain provisioning and automated SSL generation
- Secure webhook routing for third-party email service integrations

## How to vibe code Carrd

### Prerequisites

- Node.js (free): Required runtime environment for the Next.js framework and build tooling.
- GitHub (free): Version control and continuous deployment pipeline integration.

### Recommended AI tools

- Claude Code: Best-in-class coding agent for scaffolding multi-file React architectures and debugging compilation pipelines.
- Cursor: Ideal for iterative UI component styling and precise visual adjustments within the site builder canvas.

### Stack

- Frontend: Next.js with Tailwind CSS and React
- Backend: Next.js API Routes
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: Stripe
- Other: Cloudflare R2 for static site asset storage, Resend for transactional form submissions

### Hosting

- Cloudflare (Hosting published static user sites and handling global edge distribution.): $0-5/mo
- Vercel (Hosting the main builder dashboard and Next.js application.): $0/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js application, configure Tailwind CSS, set up Turso with Drizzle ORM, and implement better-auth for user accounts.

```
Initialize a new Next.js project with App Router, TypeScript, and Tailwind CSS. Configure Drizzle ORM to connect to Turso using SQLite. Define database schemas for users, sites (storing JSON node trees and published status), and form submissions. Integrate better-auth for email/password authentication with secure session handling. Ensure all environment variables are documented in a .env.example file. Verify the database connection and migration runner execute cleanly.
```

2. **Builder Canvas and Component Tree State** — Build the visual editor state management system supporting drag-and-drop or block insertion for text, images, buttons, and containers.

```
Create a visual site builder interface in Next.js using a sidebar control panel and a central live preview canvas. Implement a React state architecture representing a single-page site as an ordered tree of structural blocks (Header, Text, Image, Button, Container). Support adding, deleting, reordering, and editing properties for each block. Ensure state updates reflect instantly in the preview canvas without lagging.
```

3. **Responsive Styling and Layout Engine** — Implement responsive controls allowing users to adjust alignments, padding, margins, and typography across desktop and mobile viewports.

```
Extend the builder block properties to support viewport-specific styling rules (desktop, tablet, mobile). Implement a responsive toolbar that lets users preview the site at different screen dimensions. Generate clean Tailwind CSS classes dynamically from block state configurations to render consistent layouts across all screen sizes.
```

4. **Static Site Generation and Export Pipeline** — Build the publishing engine that compiles user site JSON structures into self-contained HTML and CSS files.

```
Implement a publishing API route that takes a site's block tree JSON, compiles it into a single highly-optimized static HTML file with embedded responsive CSS, and uploads the resulting asset directly to Cloudflare R2 storage. Ensure published URLs point correctly to the generated static assets on the edge.
```

5. **Form Handling and Resend Integration** — Add interactive form elements to published sites that securely route submissions to configured email destinations.

```
Create a form block component for the builder that collects names and email addresses. Implement a secure server-side API endpoint to handle inbound form submissions from published static sites via fetch, validating input payloads against spam, and forwarding submissions using the Resend API or storing them in the database for creator review.
```

6. **Dashboard and Site Management** — Build the user dashboard for managing multiple sites, archiving to trash, and initiating publishing actions.

```
Build a main user dashboard displaying a grid of all sites created by the logged-in user. Include actions for creating a new site from scratch or a template, editing, publishing, unpublishing, and moving sites to a Trash folder with restore capabilities. Ensure clean navigation and error handling across all dashboard views.
```

### Cost vs paying

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

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

**Ongoing costs (monthly):**

- Cloudflare & Vercel Free Tiers: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $1.58/mo ($19/yr Pro Standard)
- Build time: 40-60 hours
- AI tool credits: $20
- Break-even: Never (subscription is cheaper, build for learning)

## Sources

- [Carrd Official Website](https://carrd.co)
- [Carrd Documentation - Signup Forms](https://carrd.co/docs/forms/setting-up-a-signup-form)