Architecture and development

Rendering flow

1. src/index.ts exports the public API; components/index.tsx exposes AutoForm as ErlForm.
2. infer.ts recursively converts Zod schemas into FieldMeta.
3. AutoForm.tsx subscribes to values, groups sections, filters wizard fields, and applies server errors.
4. FieldRenderer.tsx handles scope/path, conditional state, layout, clearOnHide, and container/input dispatch.
5. Field.tsx mounts form.Field and label/description/error wrappers. FieldControl.tsx selects custom or native controls.
6. field-array/field-object handle structured values; utilities handle paths, resolvers, error normalization, and section grouping.

Library demos live in src/demo. tests/types checks the typed API, and tests/runtime/release.test.mjs verifies inference/rendering/release behavior. This documentation site is a separate repository.

Running the library

corepack enable
pnpm install
pnpm dev
pnpm check

Use Node.js 22 and pnpm 10.19.0 as specified by the library. check runs typecheck, lint, the tsup build, and runtime tests. build:app builds the Vite demo; build creates the package. prepublishOnly runs check.

Package output

The ESM entry is dist/index.js with dist/index.d.ts declarations and source maps. React, React DOM, TanStack Form, and Zod are externalized. CSS is injected by the build, and CSS files are marked as side effects. Only the main package entry point is exported.

Maintaining this documentation

Public MDX files are under content/docs, preview components under components, navigation in meta.json, and redirects in next.config.mjs. Unsuffixed MDX/metadata is English; .id.mdx and meta.id.json provide Indonesian counterparts. Keep the same slug and navigation entries for both languages. Translate prose, frontmatter, and headings, not API identifiers.

The i18n config lives in lib/i18n.ts. proxy.ts makes /docs English and /id/docs Indonesian. The localized layout sets HTML lang and provides translated UI labels; the source loader and search API use the same locale config. Localize internal links so Indonesian navigation stays Indonesian.

npm install
npm run fumadocs-build
npm run lint

fumadocs-build generates MDX modules before Next.js builds. Check the library exports, types, inference, renderer, demos, and tests before documenting a feature. Every feature preview should have a component, appear on both locale pages, and provide a DemoSource block with a short, feature-focused library usage snippet. Conceptual/reference/community pages do not need artificial form previews.

A standalone example must call useForm inside a React component and provide defaultValues, validation, an HTML form, and submit handling.