universal-form-handler

One Schema. Any UI. Infinite Possibilities.

🚧 Version 3 Coming Soon

Stay tuned for even more powerful features and improvements in V3!

🚀 Version 2 Official Features

Version 2 introduces major enhancements, positioning universal-form-handler as a complete schema-first form infrastructure for modern apps:

• Next.js Visual Form Builder UI

  • Drag-and-drop form fields visually
  • Real-time preview of your form
  • Export schemas in JSON, TypeScript, or JSX
  • Perfect for teams, no-code, and rapid prototyping

• Zod & Yup Validation Plugins

  • Integrate Zod or Yup validation directly into your form engine
  • Apply rich, reusable validation logic across frontend and backend
  • Support for custom rules, async checks, and scoped field validators
  • Write once, validate anywhere—client, server, or API

• PDF Export Functionality

  • Seamlessly generate styled, branded PDFs from form submissions
  • Works with both client-side and backend form workflows
  • Ideal for HR, finance, compliance, and reporting automation

These new features significantly expand the usability and flexibility of the package, making universal-form-handler the go-to solution for schema-driven forms in any stack.

Table of Contents

• Features
• Installation
• Usage
  • Core Engine
  • React Adapter
  • CLI Tool
• API
• Publishing
• Contributing
• License

Features

• Core Engine: Framework-agnostic logic, built-in validation, full form state control
• React Adapter: Hook-based interface for seamless React integration
• CLI Tool: Scaffold forms, generate schemas, validate logic from the terminal
• TypeScript: Written in TypeScript, tree-shakable, zero runtime dependencies

Installation

npm install @formkit/universal-form-handler
# or
yarn add @formkit/universal-form-handler
# or
pnpm add @formkit/universal-form-handler

Usage

Core Engine

import { createFormHandler } from '@formkit/universal-form-handler';

const schema = {
  fields: {
    name: { type: 'string', required: true },
    age: { type: 'number' },
    email: { type: 'string', required: true, pattern: /^[^@\s]+@[^@\s]+\.[^@\s]+$/ }
  }
};

const form = createFormHandler(schema);
form.setValue('name', 'Alice');
const errors = form.validate();

React Adapter

import { useFormHandler } from '@formkit/universal-form-handler/reactAdapter';

const schema = { /* ... */ };
const { values, setValue, errors, validate } = useFormHandler(schema);

CLI Tool

# Scaffold a new schema
npx universal-form-handler-cli scaffold myForm

# Validate data against a schema
npx universal-form-handler-cli validate myForm.schema.json myData.json

API

• createFormHandler(schema) — Create a form handler instance
• form.setValue(field, value) — Set a field value
• form.getValues() — Get all field values
• form.validate() — Validate fields and return errors
• useFormHandler(schema) — React hook for form state and validation

Publishing

To publish a new version:

make publish

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page or submit a pull request.

License

MIT