Function: generateFormComponent()

generateFormComponent(fields, config): string

Defined in: packages/codegen/src/generate.ts:640

Generate a React form component as a TypeScript string from FormField[].

Produces a .tsx file string containing imports, the form component, and (when config.mode === 'auto-save') the FormProvider wrapper. The output is deterministic for a given (fields, config) pair — same inputs always produce the same output string.

Parameters

fields

FormField[]

Intermediate FormField[] from walkSchema.

config

CodegenConfig

Resolved codegen config (output path, component names, UI preset, etc.).

Returns

string

The generated .tsx source as a string. Not yet written to disk.

Example

const fields = walkSchema(schema, { formRegistry });
const code = generateFormComponent(fields, {
  schemaPath: './signup.schema.ts',
  exportName: 'signupSchema',
  outputPath: './SignupForm.tsx',
  componentName: 'SignupForm',
  mode: 'submit',
  ui: 'shadcn',
});
await writeFile('./SignupForm.tsx', code, 'utf8');

Use When

• Building a custom codegen pipeline that assembles FormField[] and needs the TSX string
• Writing codegen tests that verify output structure without spawning a CLI process

Avoid When

• You want file-writing behavior — use runGenerate() from @zod-to-form/cli instead
• You are using the Vite plugin — compileTarget wraps this and handles esbuild transformation

Pitfalls

• 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