FormsCN

Form Builder

The Form Builder is a visual tool that lets you create forms using a drag-and-drop interface. Generate production-ready code using shadcn/ui components.

Features

  • Visual Editor: Build forms without writing code
  • Form Library Choice: React Hook Form or TanStack Form
  • shadcn Dependencies Detection: Auto-detect required components
  • Multi-Framework: Generate code for Next.js, Vite, TanStack Start, and Remix
  • Optional Auth: Add Better Auth only when you need it
  • Publish to CLI: Generate unique npx shadcn add commands
  • Live Preview: See your form in real-time as you build
  • 20+ Templates: Pre-built forms to get started quickly

Getting Started

Access the form builder at /editor.

Welcome Modal

First-time visitors see a welcome modal with three options:

  • Try a Template: Start with the Contact Form template
  • Start from Scratch: Build from an empty form
  • Watch Demo: See FormSCN in action

You can skip this and it won't appear again.

Editor Layout

Left Sidebar

The sidebar contains form configuration sections:

Form Fields (Default Open)

Add and configure form fields organized by category:

  • Basic: Text, Email, Password, Number, Textarea
  • Selection: Select, Checkbox, Radio, Switch
  • Advanced: Date, File Upload

Click a field to add it to your form, then configure:

  • Field type and input type
  • Label and placeholder text
  • Validation rules (required, min/max length, etc.)
  • Description/help text

Steps (Multi-Step Forms)

Enable multi-step mode to create wizards:

  • Add/remove steps
  • Configure step titles and descriptions
  • Organize fields across steps
  • Built-in progress indicator

Appearance

Customize the visual theme:

  • Color scheme
  • Font family
  • Border radius
  • Live preview updates automatically

Form Library

Choose your form state management:

React Hook Form (Default)

  • Industry standard
  • Excellent performance
  • Large ecosystem

TanStack Form

  • Modern and headless
  • Framework-agnostic
  • Type-safe by design

Toggle between them anytime—the builder regenerates code automatically.

Advanced (Optional)

Add Better Auth features when needed:

Note: This section is collapsed by default and clearly marked as "Optional"

Enable:

  • OAuth Providers: Google, GitHub, Discord, etc.
  • Auth Plugins: 2FA, Magic Links, Passkeys, Username Auth, Organizations
  • Database Adapter: Prisma or Drizzle (for auth schema generation)

Important: Auth is completely optional. All templates work perfectly without it.

Main Workspace

Preview Tab

See your form rendered in real-time:

  • Fully interactive
  • Validation works on submit
  • Shows form data on successful submission
  • Responsive preview

Integrate Tab

Get your production code:

Component Tab (Default)

Shows the generated form component code with:

  • shadcn Dependencies: Badge showing which shadcn components are needed
  • Installation Command: npx shadcn add command to install dependencies
  • Generated Code: Full TypeScript component ready to use

The code includes:

/**
 * Generated with FormSCN - The shadcn/ui Form Builder
 * https://formscn.com
 * 
 * This form uses shadcn/ui components with React Hook Form and Zod validation.
 */
Auth & DB Tab (Optional)

Only appears if you enabled Better Auth. Shows:

  • Better Auth configuration (lib/auth.ts)
  • Auth client setup (lib/auth-client.ts)
  • Database schema (Prisma or Drizzle)
  • Environment variables template
Setup Guide Tab (Optional)

Only appears if you enabled Better Auth. Provides:

  • Step-by-step integration checklist
  • Required environment variables
  • Database migration commands
  • OAuth app setup instructions

Example Workflow

Step 1: Select a Template

Choose from 20+ templates:

  • Authentication: Login, Signup, Password Reset (all auth-optional)
  • Contact: Contact Form, Support Ticket, Booking Request
  • Marketing: Waitlist, Newsletter, Event Registration
  • E-commerce: Checkout forms
  • Profile: Settings, Address forms
  • Wizards: Onboarding, Detailed Applications

Step 2: Customize Fields

Click any field to configure:

  • Change field type (text → email → password)
  • Update labels and placeholders
  • Add validation rules
  • Set default values
  • Add descriptions

Drag fields to reorder them.

Step 3: Choose Form Library

In the sidebar, select:

  • React Hook Form for battle-tested reliability
  • TanStack Form for modern architecture

The builder adapts code generation automatically.

Step 4: Check Dependencies

Go to Integrate → Component. You'll see:

shadcn Components Needed:

  • button
  • input
  • form
  • card
  • checkbox

Installation Command:

npx shadcn@latest add button input form card checkbox

Install these components in your project before using the form.

Step 5: Publish & Install

  1. Click "Generate Unique Command"
  2. Copy the command: 
    npx shadcn@latest add https://formscn.com/api/r/YOUR_FORM_ID.json
  3. Run it in your project
  4. The form component and all dependencies are installed automatically

Step 6: Use the Form

import { ContactForm } from "@/components/contact-form"

export default function Page() {
  return (
    <div className="max-w-md mx-auto py-10">
      <ContactForm 
        onSubmit={async (data) => {
          // Handle form submission
          console.log(data)
        }}
      />
    </div>
  )
}

shadcn Dependencies Detection

FormSCN automatically analyzes your form and tells you exactly which shadcn/ui components you need.

How it works:

  • Parses generated code for component imports
  • Maps component names to shadcn registry names
  • Provides copy-to-clipboard installation command

Example:

A form with text inputs, selects, and checkboxes shows:

Required shadcn components: button, card, form, input, select, checkbox

npx shadcn@latest add button card form input select checkbox

This ensures you only install what you need.

Optional Authentication

Better Auth integration is completely optional.

When to use it:

  • User login/signup flows
  • Protected routes
  • Organization/team features
  • Multi-factor authentication

When you don't need it:

  • Contact forms
  • Waitlist signups
  • Newsletter subscriptions
  • Any form that just collects data

Enabling Auth:

  1. Go to Advanced section in sidebar (collapsed by default)
  2. Toggle "Add Better Auth"
  3. Configure:
    • OAuth Providers: Click to enable Google, GitHub, etc.
    • Auth Plugins: Enable 2FA, Magic Links, etc.
    • Database: Choose Prisma or Drizzle
  4. Go to Integrate → Auth & DB for generated config
  5. Follow Setup Guide for integration steps

The builder validates your config (e.g., warns if Magic Link is enabled without an Email field).

Advanced Features

Multi-Step Forms

Enable "Multi-Step" mode to create wizards:

  • Organize fields into steps
  • Add step titles and descriptions
  • Built-in navigation (Next/Previous)
  • Progress indicator
  • Validation per step

Theme Customization

Customize appearance without touching code:

  • Color scheme (matches shadcn themes)
  • Font family (sans, serif, mono)
  • Border radius (0.0 to 1.0)

Form Submission

In Preview mode:

  • Fill out the form
  • Click Submit
  • See validation errors if any
  • View submitted data in a drawer

This helps you test the form before exporting.

Keyboard Shortcuts

  • Esc: Deselect field
  • Delete: Remove selected field
  • ↑/↓: Navigate between fields

Tips

  • Start with templates: They're fully functional and customizable
  • Test in preview: Use the Preview tab to test validation
  • Check dependencies: Always install required shadcn components
  • Auth is optional: Only enable Better Auth if you need it
  • You own the code: Modify generated code however you want
  • Type-safe: All forms use Zod schemas with TypeScript inference
Quick StartForm Fields