DEV Community

yanggmtl
yanggmtl

Posted on

Stop Hardcoding React Forms: Build Dynamic Schema-Driven Forms with Formitiva

#react #javascript #webdev #opensource

React developers write a lot of forms.

Contact forms. Admin panels. Settings pages. Onboarding flows.

And in most React apps, we build them the same way:

  • Write JSX
  • Wire up validation
  • Connect submission logic
  • Repeat

It works… until the form needs to change without redeploying.

What happens when:

  • Forms need to change without redeploying
  • Non-frontend teams must configure fields
  • Your backend drives the structure
  • You support multi-tenant platforms

Suddenly, hardcoded JSX forms become a bottleneck.

That’s where Formitiva comes in.

What Is Formitiva?

Formitiva/React is a schema-driven form platform for React.

Instead of building forms directly in JSX, you define them as JSON schemas and render them at runtime.

Your form definition can live:

  • In your source code
  • In a database
  • Inside a CMS
  • Behind an API

Formitiva reads the definition and renders the entire form automatically.

No handcrafting every <input />.
No redeploy required for structural changes.

Think of It as a Runtime Form Engine

Formitiva isn’t trying to replace traditional form libraries like Formik or React Hook Form.

Those tools are fantastic for static, code-defined forms.

Formitiva is different.

It is:

  • Schema-first – Forms are defined as structured JSON
  • Runtime-configurable – Update structure without redeploying
  • Backend-friendly – Store, version, and serve form definitions
  • Portable – Reuse forms across multiple apps

It’s built for dynamic environments where form structure is data — not UI code.

Why Schema-Driven Forms Matter

Most React form libraries assume:

  • The structure is mostly static
  • Developers define fields in JSX
  • Structural changes require a redeploy

That’s fine for marketing forms or simple CRUD screens.

But in:

  • SaaS platforms
  • Enterprise systems
  • Multi-tenant applications
  • CMS-driven architectures

Those assumptions quickly become limitations.

With Formitiva, the UI becomes a rendering layer. The structure lives in data.

Core Mental Model

Formitiva is built around a few key concepts:

Definition

The JSON schema describing:

  • Fields
  • Labels
  • Validation rules
  • Conditional logic
  • Behavior
  • Instance

The values object (for editing existing data or preloading state).

Renderer

The React component that transforms a definition into a live form.

Registries

Extension points for:

  • Custom components
  • Custom validators
  • Submission handlers
  • Button actions

i18n Support

Translation helpers built into the system.

This separation keeps things clean:

  • Structure → Data
  • Rendering → Engine
  • Customization → Registries

Getting Started in 2 Minutes

Install:

npm install @formitiva/react
Enter fullscreen mode Exit fullscreen mode

Create a form definition:

import { Formitiva } from '@formitiva/react';

const definition = {
  name: 'contactForm',
  version: '1.0.0',
  displayName: 'Contact Form',
  properties: [
    { name: 'name', type: 'text', displayName: 'Name', required: true },
    { name: 'email', type: 'email', displayName: 'Email', required: true },
    { name: 'message', type: 'multiline', displayName: 'Message' }
  ]
};

export default function App() {
  return <Formitiva definitionData={definition} />;
}
Enter fullscreen mode Exit fullscreen mode

That’s it.

Formitiva rendering a schema-driven form

No JSX per field.
No manual wiring.
The form renders entirely from your schema.

Handling Submissions

Just pass an onSubmit handler:

<Formitiva
  definitionData={definition}
  onSubmit={(definition, instanceName, values) => {
    console.log(values);
  }}
/>
Enter fullscreen mode Exit fullscreen mode

You can also register named submission handlers — which is powerful when your backend decides how a form should be processed.

Perfect for API-driven workflows.

When Should You Use Formitiva?

Formitiva shines when forms are:

  • Generated from backend data
  • Frequently updated
  • Reused across multiple applications
  • Managed by low-code teams
  • Stored and versioned in a database
  • Highly dynamic and rule-driven

If your forms are simple and static, traditional libraries are great.

If your forms are part of a configurable platform — Formitiva becomes very interesting.

Bonus: Low-Code Builder

Formitiva also includes a drag-and-drop Builder.

This enables:

  • Designers to create forms visually
  • Product teams to configure fields
  • Non-frontend contributors to maintain workflows

While developers still retain full control through registries and customization hooks.

The Big Idea

Most React form libraries treat forms as components.

Formitiva treats forms as data.

That shift unlocks:

  • Runtime configurability
  • Backend-driven workflows
  • Cross-application portability
  • Cleaner separation of concerns

Define once. Render anywhere. Update without redeploying.

React-ready. Vue support in testing.

Try Formitiva

If you're building configurable systems, admin platforms, or dynamic SaaS products, schema-driven forms can unlock a much more flexible architecture.

Top comments (0)