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. For the builder itself:

@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.

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.

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).

Host on Neon or Supabase. Both handle JSONB queries efficiently and have free tiers.

File Storage: Cloudflare R2

Form submissions often include file uploads: resumes, photos, documents. Store these in Cloudflare R2 with zero egress fees.

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.

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)
• Resend for email notifications on new submissions
• 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)
• Export to CSV/Excel for submission downloads
• Conditional logic engine for show/hide field rules

Monthly Cost Breakdown

A form builder can run very lean. 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.