FormCarve: Building a Dynamic React Form Builder & Renderer (Monorepo)

Have you ever found yourself writing endless lines of JSX to create a basic form? Or wished non-developers could easily design forms without needing a single line of code? That's precisely the challenge FormCarve aims to solve.

FormCarve is an advanced, monorepo-based solution that redefines how React forms are built and deployed. It provides a visual, code-free experience for designing forms and a reliable, reusable engine for dynamically rendering them in any React application.

What is FormCarve?

At its core, FormCarve separates form design from form rendering,outlined within two primary components in a single pnpm monorepo:

@jonesstack/react-form-engine (NPM Package): This is the heart of the system. It's a lightweight, reusable React library responsible for interpreting a JSON schema and dynamically rendering fully interactive, validated HTML forms.
apps/builder (Next.js Application): This is the user-facing part – a powerful, intuitive web application providing a visual drag-and-drop interface where users can design their forms without writing any code.

Building FormCarve: The Journey Behind the Scenes

Developing FormCarve involved several key architectural decisions and technical implementations:

The Monorepo Advantage: I chose a pnpm workspace to manage the interdependent builder application and react-form-engine library. This setup was crucial for fostering code sharing, ensuring consistent dependency management, and streamlining the development workflow.
The Core Form Engine:
- Schema-First Design: The journey began by defining the FormField TypeScript interface. This established a canonical JSON schema capable of describing various form elements (text, email, number, textarea, select, checkbox, radio, submit button), their properties (labels, placeholders, required status), and even basic inline styling. This schema acts as the universal language for the entire system.
- Dynamic Rendering with FormRenderer: I then built the FormRenderer React component. It consumes an array of FormField objects and intelligently translates them into native HTML input elements using conditional rendering (switch statements). This component is designed for maximum reusability, allowing any React project to integrate dynamic forms by simply passing a JSON schema.
- Client-Side Validation: A critical feature I integrated was robust client-side validation directly within the FormRenderer. It interprets required flags, minLength, maxLength, min, max values, and custom regex patterns defined in the schema. It provides immediate visual feedback to the user on invalid inputs and prevents submission until all validation rules are met.
The Visual Builder (Next.js 14 App):
- Intuitive UI: Built with Next.js, the builder provides a modern, responsive user interface. I leveraged shadcn/ui for high-quality, accessible components, lucide-react for crisp icons, and sonner for slick toast notifications, ensuring a polished user experience.
- Interactive Design: The core allows users to intuitively add new field types via drag-and-drop, reorder them, and remove them directly on a canvas, mimicking popular form-building tools.
- Dynamic Property Editor: A smart sidebar panel adapts its inputs based on the selected form field. Here, users can configure properties like labels, placeholders, and crucially, define the granular validation rules (minLength, maxLength, pattern, min, max) and basic styling that the FormRenderer understands. This direct mapping empowers non-technical users to define complex form behavior visually.
- Live Interactive Preview: To provide immediate feedback, I implemented a dedicated "Live Preview" page. This page dynamically receives the current form schema from the builder (persisted via localStorage for cross-page navigation) and renders it using the actual @jonesstack/react-form-engine's FormRenderer. This allows real-time testing of form appearance and validation.
- Schema Export: The builder facilitates instant export of the generated form schema as a pretty-printed JSON file and offers to copy it to the clipboard, making the form definition highly portable for integration into other applications.

{
  "formName": "My First FormCarve Form",
  "formFields": [
    {
      "id": "field_1752798322606_mdcu5vwmm",
      "type": "text",
      "label": "Name",
      "placeholder": "Enter name",
      "required": false,
      "styling": {
        "borderRadius": 6,
        "backgroundColor": "#ffffff",
        "borderColor": "#d1d5db",
        "textColor": "#000000",
        "fontSize": 14,
        "padding": 12
      }
    },
    {
      "id": "field_1752798346678_w3ny1ctf3",
      "type": "email",
      "label": "Email",
      "placeholder": "Enter email...",
      "required": false,
      "styling": {
        "borderRadius": 6,
        "backgroundColor": "#ffffff",
        "borderColor": "#d1d5db",
        "textColor": "#000000",
        "fontSize": 14,
        "padding": 12
      }
    },
    {
      "id": "field_1752798368166_3xbhugglm",
      "type": "textarea",
      "label": "Message",
      "placeholder": "Your message",
      "required": false,
      "styling": {
        "borderRadius": 6,
        "backgroundColor": "#ffffff",
        "borderColor": "#d1d5db",
        "textColor": "#000000",
        "fontSize": 14,
        "padding": 12
      }
    },
    {
      "id": "default-submit-button",
      "type": "submit-button",
      "label": "Submit",
      "required": false,
      "styling": {
        "borderRadius": 6,
        "backgroundColor": "#3b82f6",
        "borderColor": "#3b82f6",
        "textColor": "#ffffff",
        "fontSize": 16,
        "padding": 12
      }
    }
  ]
}

The Value & Impact of FormCarve

FormCarve directly addresses common development challenges, delivering significant value:

Accelerated Development & Reduced Boilerplate: Developers can integrate complex, validated forms in minutes by consuming a simple JSON schema, drastically cutting development time and reducing repetitive JSX coding.
Empowers Non-Technical Stakeholders: The visual, code-free builder empowers product managers, marketers, and content creators to design and iterate on forms independently, freeing up developer resources for more complex tasks.
Ensures Consistency & Quality: Forms rendered by the FormRenderer consistently adhere to the standardized schema and validation rules, minimizing manual errors and ensuring a cohesive user experience across applications.
Promotes Reusability & Maintainability: The @jonesstack/react-form-engine is a standalone, framework-agnostic (React-specific) NPM package. Its medium complexity lies in its dynamic rendering logic, sophisticated client-side validation, and error management, leading to high developer productivity and standardized, error-resistant form implementation across diverse React projects.
Rapid Prototyping: The combination of visual design, live preview, and immediate schema export allows for incredibly fast prototyping and iteration cycles.

What's Next for FormCarve?

While FormCarve is currently a powerful functional prototype and demo, future enhancements could include:

Form Persistence: Implementing backend integration to save and load designed forms, allowing users to manage multiple forms.
Advanced Field Types: Incorporating more complex input types like rich text editors, date pickers with range selection, and file upload components.
Conditional Logic: Adding the ability to show or hide fields based on user input in other fields.
Real Embed Script: Developing a true embed.js that can dynamically load and render forms on any website, regardless of its underlying technology.

Wrapping Up

Building FormCarve has been an exciting journey, demonstrating how a modular, monorepo-based approach can yield a robust solution for a common web development challenge. It showcases how visual tools can empower teams and streamline workflows, laying a solid foundation for future growth and success.

I'd love to hear your thoughts! Have you tackled similar challenges? What features would you find most valuable in a tool like FormCarve?

Feel free to connect or ask questions in the comments below!