@rafaelsilvadeveloper/zod-meta-form

A framework-agnostic generator of Form UI metadata from Zod schemas, converting schemas into dynamic, client-ready forms.

Features

• 🎯 Framework Agnostic: Outputs pure JSON-serializable UI form trees. Works with React, Vue, Svelte, Angular, or Vanilla JS.
• 🔄 Recursive Parsing: Deeply inspects nested ZodObject and ZodArray schemas.
• 🏷️ Auto-Label Generation: Automatically converts camelCase, snake_case, and kebab-case field names into clean, readable Title Case labels.
• 🛠️ Zod Constraint Mapping: Translates string and number constraints (email, url, uuid, min, max, regex) into form validation rules.
• 🎛️ Supports Enums: Converts Zod enum and nativeEnum options directly into dropdown options lists.

Installation

npm install @rafaelsilvadeveloper/zod-meta-form zod

Usage

import { z } from 'zod';
import { zodToFormMeta } from '@rafaelsilvadeveloper/zod-meta-form';

// 1. Define your Zod schema
const signupSchema = z.object({
  firstName: z.string().min(2).describe('Your first name'),
  email: z.string().email(),
  role: z.enum(['developer', 'designer', 'manager']).default('developer'),
  subscribeToNewsletter: z.boolean().optional(),
});

// 2. Generate form UI metadata
const formMeta = zodToFormMeta(signupSchema);

console.log(JSON.stringify(formMeta, null, 2));

Output Form Metadata Structure

{
  "type": "object",
  "label": "",
  "required": true,
  "fields": {
    "firstName": {
      "type": "text",
      "label": "First Name",
      "required": true,
      "description": "Your first name",
      "validations": {
        "min": { "value": 2 }
      }
    },
    "email": {
      "type": "email",
      "label": "Email",
      "required": true,
      "validations": {
        "email": true
      }
    },
    "role": {
      "type": "select",
      "label": "Role",
      "required": true,
      "defaultValue": "developer",
      "options": ["developer", "designer", "manager"]
    },
    "subscribeToNewsletter": {
      "type": "checkbox",
      "label": "Subscribe To Newsletter",
      "required": false
    }
  }
}

API

zodToFormMeta(schema: z.ZodTypeAny, fieldName?: string): FormMeta

Recursively generates form controls, type mappings, validation rules, default values, options, and descriptions from a Zod schema.

toLabel(fieldName: string): string

Converts camelCase, snake_case, and kebab-case string patterns into standard capitalized labels.

Support

For support, questions, or discussions, join our Discord server:

License

MIT