pradeepmouli/zod-to-form-codegen

@zod-to-form/codegen

Browser-safe code generation utilities for Zod v4 form components.

Provides the building blocks for generating React form TSX files from a FormField[] tree and a ZodFormsConfig. No Node.js dependencies — safe to import in browser and server environments alike.

Key exports:

• generateFormComponent — produce a complete TSX form component string
• getFileHeader — emit import declarations for generated files
• renderField — render a single field to its JSX string
• buildConfigSource — generate a z2f.config.ts starter file
• getFieldTemplateSource — emit the preset FieldTemplate component source
• generateSchemaLiteFile — emit the lite schema file for optimized validation

When to Use

Use this skill when:

• Building a custom codegen pipeline that assembles FormField[] and needs the TSX string → use generateFormComponent
• Writing codegen tests that verify output structure without spawning a CLI process → use generateFormComponent
• Building a custom codegen backend that needs the same override resolution logic as the CLI → use resolveFieldMapping
• Writing tests that verify field-to-component mapping for a given config → use resolveFieldMapping

Do NOT use when:

• You want file-writing behavior — use runGenerate() from @zod-to-form/cli instead (generateFormComponent)
• You are using the Vite plugin — compileTarget wraps this and handles esbuild transformation (generateFormComponent)
• You are using the CLI or Vite plugin — this is called internally and you don't need it (resolveFieldMapping)

API surface: 8 functions, 1 constants

NEVER

• NEVER call generateFormComponent with a stale fields array from a previous schema version — there is no cache invalidation; callers must re-run walkSchema on schema change
• NEVER use the returned string as a module cache key — it is not content-addressed; use configHash from @zod-to-form/core on the config object instead
• NEVER assume source: 'none' means the field has no component — the schema walker may have inferred one; resolveFieldMapping only resolves user-provided config overrides

Configuration

2 configuration interfaces — see references/config.md for details.

Quick Reference

Codegen: generateFormComponent (Generate a React form component as a TypeScript string from FormField[]), resolveFieldMapping (Resolve the component name and override config for a single FormField key) Templates: getFileHeader (Generate the import block for a form component file), renderField (Render a single FormField to its plain-HTML JSX string), registerPathExpr (Produce the correct register(), generateSchemaLiteFile(Generate the content of a), getFieldTemplateSource (Return the source code for the preset's FieldTemplate React component) Config Templates: buildConfigSource (Generate a z2f) **field-templates:** PRESET_TEMPLATE_IMPORTS` (Components that each preset's field template imports from...)

References

Load these on demand — do NOT read all at once:

• When calling any function → read references/functions.md for full signatures, parameters, and return types
• When using exported constants → read references/variables.md
• When configuring options → read references/config.md for all settings and defaults

Links

• Author: Pradeep Mouli [email protected] (https://github.com/pradeepmouli)