---
description: "Browser-safe code generation utilities for Zod v4 form components.\n\nProvides the building blocks for generating React form TSX files from a\n`FormField[]` tree and a `ZodFormsConfig`. No Node.js dependencies — safe\nto import in browser and server environments alike.\n\nKey exports:\n- `generateFormComponent` — produce a complete TSX form component string\n- `getFileHeader` — emit import declarations for generated files\n- `renderField` — render a single field to its JSX string\n- `buildConfigSource` — generate a `z2f.config.ts` starter file\n- `getFieldTemplateSource` — emit the preset FieldTemplate component source\n- `generateSchemaLiteFile` — emit the lite schema file for optimized validation Use when: Building a custom codegen pipeline that assembles `FormField[]` and needs the...."
name: 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 <pmouli@mac.com> (https://github.com/pradeepmouli)