Best Tech Stack for a Form Builder as a Solo Developer

Form builders are a proven SaaS model. Typeform, Tally, JotForm, and Google Forms collectively serve hundreds of millions of users. The market is huge because literally every business needs forms: surveys, contact forms, lead capture, applications, quizzes, registrations. Building a form builder as a solo developer means solving a drag-and-drop UI problem, a data schema problem, and a submission handling problem.

The right stack makes the difference between a smooth builder experience and a frustrating one.

Recommended Stack at a Glance

Frontend: Next.js with a Drag-and-Drop Library

The form builder UI is the product. Users need to drag field types onto a canvas, reorder them, configure properties (required, placeholder, options), and preview the result in real-time. This is an inherently interactive, state-heavy application.

Next.js with React gives you access to the best drag-and-drop libraries in any framework ecosystem. Next.js is the most-pulled React framework on npm, with about 40.1 million weekly downloads on the next package and roughly 139,600 GitHub stars, and the current stable release is 16.2.6 (checked on 2026-05-30). That scale matters for a solo developer because nearly every drag-and-drop, form, and ORM library treats Next.js as a first-class target.

@dnd-kit is the go-to drag-and-drop library. It's accessible, performant, and supports sortable lists (reordering form fields), droppable zones (dragging field types from a sidebar to the canvas), and collision detection algorithms. It handles all the edge cases: keyboard navigation, screen reader support, touch devices. It is MIT-licensed and free, with around 17,200 GitHub stars and about 15.7 million weekly downloads on @dnd-kit/core, currently at version 6.3.1 (checked on 2026-05-30).

If you want a lighter footprint, Pragmatic drag and drop (the library Atlassian extracted from Jira and Trello) is also free and MIT-licensed, with roughly 12,600 GitHub stars and about 811,000 weekly downloads on @atlaskit/pragmatic-drag-and-drop, currently at version 1.8.1 (checked on 2026-05-30). It ships almost no runtime and leans on the native HTML drag-and-drop API, which keeps your builder bundle small.

The form builder architecture:

1. Sidebar - List of field types (text, email, select, checkbox, file upload, etc.)
2. Canvas - The form being built, with sortable fields
3. Properties panel - Configure the selected field (label, placeholder, validation rules)
4. Preview - Live preview of the form as it will appear to respondents

Store the form schema as a JSON object in React state. Each field is an object with a type, label, properties, and validation rules. When the user publishes, save this JSON schema to your database.

For the form renderer (what respondents see), build a separate component that takes the JSON schema and renders the appropriate HTML form. This component should be lightweight and embeddable. Users will want to embed forms on their websites.

Backend: Next.js API Routes + tRPC

Your backend responsibilities:

• Form management - Save, update, delete form schemas
• Submission processing - Accept form responses, validate against schema, store results
• File handling - Process uploaded files from form submissions
• Webhooks - Forward submissions to user-configured endpoints
• Embeds - Serve embeddable form scripts

tRPC is perfect here because the form schema is a TypeScript type shared between builder and backend. When you change the schema structure, TypeScript catches inconsistencies immediately. tRPC is free and MIT-licensed, with around 40,300 GitHub stars and about 3.5 million weekly downloads on @trpc/server, currently at version 11.17.0 (checked on 2026-05-30).

For the submission endpoint, build it to handle high traffic. A popular form might get thousands of submissions. Use input validation based on the form's JSON schema, and rate limit by IP to prevent spam.

Database: PostgreSQL with JSONB

Form builders have an interesting data problem: every form has a different structure. One form has 3 fields, another has 30. One collects emails, another collects file uploads with custom metadata.

PostgreSQL's JSONB columns solve this elegantly:

• forms table: stores the form schema as a JSONB column
• submissions table: stores each response as a JSONB column

JSONB gives you the flexibility of a document database with the reliability of PostgreSQL. You can still index specific JSON paths for fast querying and use standard SQL for aggregation.

Your schema:

forms: id, user_id, title, schema (JSONB), settings (JSONB), published, created_at
submissions: id, form_id, data (JSONB), metadata (JSONB), created_at

The metadata column stores contextual information: IP address (for spam detection), user agent, referrer, submission duration.

Prisma handles JSONB columns well and gives you type-safe queries for the relational parts of your schema (users, workspaces, billing). Prisma is free and Apache-2.0-licensed, with around 46,000 GitHub stars and about 11.6 million weekly downloads on the prisma CLI package, currently at version 7.8.0 (checked on 2026-05-30).

Host on Neon or Supabase. Both handle JSONB queries efficiently and have free tiers. Neon's free plan gives you 0.5 GB of storage per project and 100 compute-hours per month, then its usage-based Launch tier charges $0.35 per GB-month of storage and $0.106 per compute-hour with no fixed monthly base fee (check current pricing, as Neon's usage-based model has shifted more than once). Supabase's free plan includes a 500 MB database and 1 GB of file storage, and its Pro plan starts at $25 per month with 8 GB of database disk and 100 GB of file storage included (all checked on 2026-05-30). Either free tier is enough to launch and validate before you pay anything.

File Storage: Cloudflare R2

Form submissions often include file uploads: resumes, photos, documents. Store these in Cloudflare R2 with zero egress fees. R2 charges $0.015 per GB-month for standard storage, includes 10 GB-month of storage free, and charges nothing for egress when files are served through R2, the Workers API, the S3 API, or r2.dev (checked on 2026-05-30). For a form builder where respondents download their own uploaded attachments, free egress is the line item that keeps the bill flat as you grow.

Use signed upload URLs so files go directly from the user's browser to R2 without passing through your server. This keeps your API fast and avoids large file upload timeouts.

Generate unique filenames (UUIDs) and store the R2 key in the submission's JSONB data alongside the original filename and content type.

Hosting: Vercel

Vercel handles the Next.js deployment with zero configuration. Your form builder dashboard runs on Vercel, and the form submission endpoints run as serverless functions. The Hobby plan is free and includes 1 million edge requests, 100 GB of fast data transfer, and 1 million function invocations per month, which is plenty for an early form builder. The Pro plan is $20 per user per month plus usage beyond the included credits, and that is the tier most paid SaaS products run on (checked on 2026-05-30).

For embeddable forms, serve a small JavaScript snippet from a CDN (Cloudflare or Vercel's edge) that loads the form renderer in an iframe or inline. Keep this script under 50KB so it doesn't slow down your users' websites.

Nice-to-Haves

• Stripe for subscription billing (free tier with limits, paid for more responses/forms). Stripe charges 2.9% plus 30 cents per successful domestic card transaction in the US, with no monthly platform fee (checked on 2026-05-30)
• Resend for email notifications on new submissions. The free plan covers 3,000 emails per month capped at 100 per day, and the Pro plan is $20 per month for 50,000 emails (checked on 2026-05-30)
• Cloudflare Turnstile for spam prevention on public forms
• Zapier/Make integration via webhooks for workflow automation
• react-hook-form for the form renderer (handles validation, error states, accessibility). It is free, MIT-licensed, the most-downloaded React form library with about 50 million weekly downloads, has around 44,700 GitHub stars, and is currently at version 7.76.1 (checked on 2026-05-30)
• Export to CSV/Excel for submission downloads
• Conditional logic engine for show/hide field rules

Monthly Cost Breakdown

All prices checked on 2026-05-30; see Sources below. A form builder can run very lean. You can launch entirely on free tiers (Vercel Hobby, Neon free, Resend free, R2's 10 GB free allowance) and only the $20 Vercel Pro upgrade plus Stripe's per-transaction cut are unavoidable once you start charging. Your main scaling cost is database storage as submissions grow, and PostgreSQL on Neon handles millions of JSONB rows before you need to think about optimization.

Conclusion

The best stack for a solo developer building a form builder: Next.js with @dnd-kit for the drag-and-drop builder, PostgreSQL JSONB for flexible form schemas and submissions, Cloudflare R2 for file uploads, tRPC for type-safe API calls, and Vercel for hosting.

The hard part of building a form builder isn't the backend. It's the builder UI. The drag-and-drop experience, field configuration panel, and live preview need to feel smooth and intuitive. Spend 70% of your development time on the builder UX and 30% on everything else. A form builder with 10 field types and a great UX will beat one with 50 field types and a clunky interface every time.

Sources

All figures checked on 2026-05-30. GitHub star counts via the GitHub REST API (api.github.com/repos/...); npm versions and weekly download counts via the npm registry (registry.npmjs.org) and downloads API (api.npmjs.org/downloads/point/last-week/...).

• Next.js stars and version: github.com/vercel/next.js, registry.npmjs.org/next/latest
• @dnd-kit stars, version, downloads: github.com/clauderic/dnd-kit, registry.npmjs.org/@dnd-kit/core/latest
• Pragmatic drag and drop stars, version, downloads: github.com/atlassian/pragmatic-drag-and-drop, registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop/latest
• tRPC stars, version, downloads: github.com/trpc/trpc, registry.npmjs.org/@trpc/server/latest
• Prisma stars, version, downloads: github.com/prisma/prisma, registry.npmjs.org/prisma/latest
• react-hook-form stars, version, downloads: github.com/react-hook-form/react-hook-form, registry.npmjs.org/react-hook-form/latest
• Vercel pricing (Hobby, Pro $20/user/month): vercel.com/pricing
• Neon pricing (free 0.5 GB / 100 CU-hours, Launch usage rates): neon.com/pricing
• Supabase pricing (free 500 MB DB, Pro $25/month): supabase.com/pricing
• Cloudflare R2 pricing ($0.015/GB-month, 10 GB free, free egress): developers.cloudflare.com/r2/pricing
• Stripe pricing (2.9% + 30c domestic card): stripe.com/pricing
• Resend pricing (free 3,000/month, Pro $20/month for 50,000): resend.com/pricing