formscn

Open Source & Contributing

FormCN is community-driven. We'd love your help to make form building easier for everyone.

Getting Started

1. Setup the Project

FormCN is a monorepo managed by Turborepo.

  1. Fork & Clone: 
    git clone https://github.com/YOUR_USERNAME/formcn.git
cd formcn
  2. Install Dependencies: 
    pnpm install
  3. Run Development Server: 
    pnpm dev
    This starts the web app at http://localhost:3000.

Project Structure

  • apps/web: The main Next.js application containing the visual builder, documentation, and the registry source.
  • apps/web/src/registry/default: The core of the registry.
    • templates/: Definition files for form templates (e.g., login.ts, onboarding-wizard.ts).
    • lib/form-generator.ts: The logic that generates code from templates.
    • ui/: Reusable UI components used within templates.

Common Tasks

Adding a New Template

Want to add a new form template? Follow these steps:

  1. Create the Template Definition: Create a new file in apps/web/src/registry/default/templates/ (e.g., booking-form.ts). Define the schema, fields, and steps using the FormTemplate interface.

  2. Export the Template: Add your template to apps/web/src/registry/default/templates/index.ts.

  3. Generate the Component: You need to create a static .tsx version of your form for the registry. You can use the visual builder locally to create it, or manually write it following the patterns in *-form.tsx files. Save it as apps/web/src/registry/default/templates/booking-form.tsx.

  4. Register the Component: Add an entry to apps/web/registry.json under items.

    {
  "name": "booking-form",
  "type": "registry:block",
  "files": [{ "path": "src/registry/default/templates/booking-form.tsx", ... }],
  ...
}

  5. Build the Registry: Run the build script to update the public API files.

    pnpm --filter web registry:build

Improving the Generator

If you want to improve the code generation logic (e.g., better validation support, new UI frameworks):

  1. Edit apps/web/src/registry/default/lib/form-generator.ts.
  2. Test your changes by running the visual builder and checking the "Code" tab.
  3. Run pnpm --filter web registry:build to update the generator artifacts.

Submitting Changes

  1. Create a branch for your feature (git checkout -b feature/amazing-form).
  2. Commit your changes.
  3. Push to your fork and submit a Pull Request.

We appreciate all contributions!

Form Fields