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

> Online form builder and workflow automation platform for SMBs

- Site: https://paperform.co
- Category: SaaS
- Verdict: **Solid side project** (65/100 vibecodeable)
- Estimated effort: 2-4 weeks part-time

## Verdict

Build a personal-use subset of the core form editor and calculation engine, but skip the full e-signature and multi-tenant agency layers.

Paperform represents a solid side project if you scope it strictly to the core value: a document-style form editor with conditional logic, calculations, and submission storage. Replicating the rich block editor requires careful state management with TipTap or Slate, and evaluating live calculation formulas safely without remote code execution vulnerabilities takes real engineering focus. While you can build a personal clone in a few weeks of concentrated coding, maintaining a production-grade multi-tenant SaaS with billing, enterprise SSO, and 2,000 native integrations is an entirely different beast.

### What you can't replicate

- The 10-year polish and extensive integration catalog spanning 2,000+ third-party apps
- SOC 2 Type II compliance and enterprise data residency guarantees
- The integrated ecosystem of Papersign and Stepper workflow automation

## What it does

Paperform combines a document-style form editor with complex conditional logic, payment collection, e-signatures via Papersign, and workflow automation via Stepper.

### Core features

- Document-style slash command form editor
- Dynamic conditional logic and dependency trees
- Calculations engine and custom pricing formulas
- Multiple question layout types (Guided mode vs classic)
- Submission storage and analytics dashboard
- AI form generation and AI insights summarization
- File upload management and storage
- Email notification dispatch

## The business

### Pricing

- Free: $0 / month
- Essentials: $29 / month
- Pro: $49 / month
- Business: $99 / month

Founded 2016.
Team size: 15-20.

## The hard parts

- Building a document-style WYSIWYG editor with block-level slash commands and specialized field rendering
- Evaluating real-time conditional dependency trees where changing field A mutates validations, visibility, and math for fields B through Z
- Secure handling of multi-tenant submission isolation and conditional webhook dispatch queues

## How to vibe code Paperform

### Prerequisites

- Node.js (free): Required runtime for running Next.js and package manager tooling.
- GitHub (free): Repository hosting and CI/CD connection for deployment platforms.

### Recommended AI tools

- Claude Code: Best-in-class agentic coding tool for scaffolding full-stack features and complex React state machines directly from the terminal.
- Cursor: AI-native editor ideal for fine-tuning the rich block-based form builder interface and complex Tailwind UI components.

### Stack

- Frontend: Next.js with Tailwind CSS and TipTap for the document-style form editor
- Backend: Next.js Server Actions and API routes
- Database: Turso for SQLite edge database storage
- Auth: better-auth for self-hosted user authentication
- Payments: none
- Other: Vercel AI SDK, Anthropic API, Resend

### Hosting

- Vercel (Hosting the Next.js frontend, serverless API routes, and edge preview deployments): $0-20/mo
- Cloudflare (Hosting static form attachment uploads via R2 object storage and DNS routing): $0/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js application with Tailwind CSS, configure better-auth, and set up the Turso SQLite database schema for users, forms, fields, and submissions.

```
Scavenge and initialize a fresh Next.js project using App Router, TypeScript, and Tailwind CSS. Install better-auth configured with email/password authentication backed by a Turso SQLite database via libSQL. Set up the core database migration schema containing tables for users, forms (storing JSON configuration blocks), fields, and submissions. Implement a clean dashboard layout shell with navigation sidebar and authentication protection middleware.
```

2. **Document-Style Form Editor** — Build a block-based WYSIWYG form editor supporting slash commands to add questions, images, headings, and layout elements.

```
Build a document-style form builder interface in Next.js using a block editor architecture (or TipTap extension model). Users should be able to type '/' to invoke a slash command menu to insert various question types (text, long text, dropdown, multiple choice, file upload, date, header, image). Each block should be stored in form state with configurable properties such as label, placeholder, required status, and help text. Ensure blocks can be reordered, duplicated, and deleted seamlessly.
```

3. **Conditional Logic and Dependency Engine** — Implement a real-time condition evaluation engine that alters question visibility and requirements based on prior responses.

```
Implement a conditional logic rules builder and real-time evaluation engine for form blocks. Allow creators to define rules on any field (e.g., 'Show this question if Question X equals Value Y'). On the form respondent view, evaluate the dependency tree dynamically on every input change, updating field visibility, requirement validation states, and layout flow without page reloads.
```

4. **Calculations and Pricing Formula Engine** — Create a calculation field component and parser that computes dynamic scores and pricing totals based on form inputs.

```
Build a Calculation Field and custom pricing rule engine. Allow form creators to write mathematical formulas referencing other field IDs (e.g., [field_1] * [field_2] + 15). Implement a secure math expression parser on both the client (for live preview feedback) and server (for secure submission verification) to calculate final scores, totals, and quote amounts dynamically.
```

5. **Respondent Form View and Submission Handling** — Develop the public-facing respondent view supporting both classic and guided (one question at a time) modes with secure submission storage.

```
Create a public form rendering route [slug] where respondents can fill out published forms. Support two layout viewing modes toggled by form settings: 'Classic' (all questions on one scrollable page) and 'Guided Mode' (stepping through one question at a time with smooth transitions and progress indicator). Validate required fields, handle file uploads via Cloudflare R2, execute calculations, and securely store the resulting submission payload in the Turso database.
```

6. **AI Form Generation and Submission Insights** — Integrate the Vercel AI SDK and Anthropic API to enable natural language form creation prompts and automated submission summarization.

```
Integrate the Vercel AI SDK with Anthropic API to add two AI features: 1) 'AI Form Generator' where a user types a prompt (e.g., 'Create a client intake form for a real estate agency') and the AI generates the complete JSON form block structure. 2) 'AI Submission Insights' on the submissions dashboard that analyzes stored submission rows and generates a summarized executive report of trends and feedback in plain text.
```

### Cost vs paying

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

- Custom domain (optional): $12 one-time
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby / Cloudflare: $0/mo
- Anthropic API credits for AI form generation: ~$3/mo
- Resend transactional email API: $0/mo
- Total: ~$3/mo

- Paying for the SaaS instead: $49/mo (Pro Plan)
- Build time: 40-60 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: Never (built for learning and personal use)

## Sources

- [Paperform Homepage](https://paperform.co)
- [Paperform Pricing](https://paperform.co/pricing)
- [Paperform Product Overview](https://paperform.co/product)