DEV Community

Cover image for I Got Tired of Writing Forms, So I Built One That Builds Itself
Harsh Shrivastava
Harsh Shrivastava

Posted on

I Got Tired of Writing Forms, So I Built One That Builds Itself

"Code should adapt to your data, not the other way around."

Hey again, folks!

I’m Harsh — a MERN Stack developer who’s mildly obsessed with clean code and well-structured folders. Today, I want to talk about something that used to suck the life out of me: building forms. Over and over. From scratch. Every time.

Forms are like the broccoli of a web app — good for you, necessary, but rarely anyone’s favorite thing to deal with. If you’ve ever caught yourself copy-pasting <input> tags or tweaking the fifth version of a “User Settings” form, you know exactly what I mean.

So in this post, we’re going to fix that. Let’s stop repeating ourselves and start building something smarter.


The Problem: Too Many Forms, Too Much Repetition

You know the drill — a client wants a new form. Different fields. Different layout. And suddenly you're deep in a swamp of input, label, div, repeat, repeat, repeat...

You’re writing the same logic, validation, layouts, labels, and required fields over and over.

It’s not just boring.

It’s error-prone, hard to scale, and worst of all... it’s not even fun to write.

Even when you try to abstract components, you end up with a dozen props, conditional renderings, and logic that slowly turns your beautiful form into spaghetti 🍝.


The Solution: Build The Form From JSON

Instead of hardcoding every <input>, I made a simple JSON file like this:

[
  {
    "label": "Full Name",
    "type": "text",
    "name": "fullname",
    "placeholder": "Enter your full name",
    "required": true
  },
  {
    "label": "Username",
    "type": "text",
    "name": "username",
    "placeholder": "Enter your username",
    "required": true
  },
  {
    "label": "Gender",
    "type": "select",
    "name": "gender",
    "options": ["Male", "Female", "Other"]
  },
  {
    "label": "Email",
    "type": "email",
    "name": "email",
    "placeholder": "Enter your email",
    "required": true
  },
  {
    "label": "Password",
    "type": "password",
    "name": "password",
    "placeholder": "Enter your password",
    "required": true
  },
  {
    "label": "Confirm Password",
    "type": "password",
    "name": "confirmPassword",
    "placeholder": "Confirm your password",
    "required": true
  }
]
Enter fullscreen mode Exit fullscreen mode

This is now our form. Not in code — in data. Let's call it config.


Next Step: React Will Render It

Here’s the engine that powers it all:

<form>
  {config.map((field, index) => {
    if (field.type === "select") {
      return (
        <div key={index}>
          <label htmlFor={field.name}>{field.label}</label>
          <select name={field.name} id={field.name} required={field.required}>
            {field.options.map((option, optIndex) => (
              <option key={optIndex} value={option.toLowerCase()}>
                {option}
              </option>
            ))}
          </select>
        </div>
      );
    }

    return (
      <div key={index}>
        <label htmlFor={field.name}>{field.label}</label>
        <input
          type={field.type}
          name={field.name}
          id={field.name}
          placeholder={field.placeholder}
          required={field.required}
        />
      </div>
    );
  })}

  <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

What's next? Nothing. You're done!


The Output: A Clean, Functional Form

Here’s what that JSON-driven form looks like when React renders it:

JSON powered react form

Everything you defined in the JSON — labels, input types, placeholders, and even the select options — just shows up. Clean. Organized. Ready to go.

No more copy-pasting. No more boilerplate. Just a form that adapts to your data.


Why This Helped Me?

I built this because I was tired — not just of writing the same code, but of the silly little bugs that creep in when you’re doing it the old-school way. Every time a form broke, it was exhausting.

But this is not just about code reduction, this is about mindset. I stopped seeing forms as UI components and started seeing them as data models with logic.

Now:

  • I build faster.
  • I reuse more.
  • I debug less.

And honestly? I feel like a wizard every time I tweak a JSON field and watch the form update itself like magic. ✨


Now It’s Your Turn

If you’ve been stuck in the cycle of repetitive form-building, this might be your sign to break free.

Next time you build a form, try thinking in terms of data, not just UI. Map it. Render it. Reuse it. Refactor once, and let it scale like magic.

You don’t need a huge setup. Start small: a few fields, a config object, and a map() function can take you far.

I’d love to hear how you handle forms in your projects — are you team “manual inputs” or ready to join the data-driven side?

Drop your thoughts below, or share a form trick that saved your sanity.

Let’s learn from each other!

Happy coding!


Thanks for reading!

If this post helped (or mildly entertained) you, let’s stay connected: LinkedIn or X

I share dev tips, clean code patterns, and the occasional bug that made me question my life choices. 😅
Feel free to reach out — I’m always up for a good tech chat.

Top comments (0)