{"_id":"mobx-formkit","_rev":"3-8f1a27badabe3ceb6aa13cd12cbeb2f0","name":"mobx-formkit","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"mobx-formkit","version":"1.0.0","keywords":["form","mobx","state","events","nested","fields","bindings","react","reactive","validation","validator","json","schema","declarative","rules"],"author":{"url":"https://twitter.com/foxhound87","name":"Claudio Savino","email":"claudio.savino@me.com"},"license":"MIT","_id":"mobx-formkit@1.0.0","maintainers":[{"name":"foxhound87","email":"savino87@gmail.com"}],"homepage":"https://github.com/foxhound87/mobx-formkit#readme","bugs":{"url":"https://github.com/foxhound87/mobx-formkit/issues"},"dist":{"shasum":"823f4048961cf15305404fee0a14cd62b663c5f6","tarball":"https://registry.npmjs.org/mobx-formkit/-/mobx-formkit-1.0.0.tgz","fileCount":256,"integrity":"sha512-NsN8xoIeLxc4L66JNxnp5k+xQquCb1Tvh7WxPQcd2lfh9yE/t9Cc2ZOKZHarRkGyDc3CaEEHmEXLx4ix+cR26A==","signatures":[{"sig":"MEUCIFhOyZUttgUcinI27cfcYkYtJWobZEN2q4hvNQjAVNB5AiEAu2EqXhmiDWD2N/iNsk7FBvearba5ZQIg4vWTjFECFJU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4160369},"main":"./lib/index.js","types":"./lib/index.d.ts","config":{"commitizen":{"path":"cz-conventional-changelog"}},"module":"./lib/esm/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./lib/index.d.ts","import":"./lib/esm/index.js","require":"./lib/index.js"},"./composer":{"types":"./lib/composer.d.ts","import":"./lib/esm/composer.js","require":"./lib/composer.js"},"./lib/utils":{"types":"./lib/utils.d.ts","import":"./lib/esm/utils.js","require":"./lib/utils.js"},"./lib/composer":{"types":"./lib/composer.d.ts","import":"./lib/esm/composer.js","require":"./lib/composer.js"},"./validators/*":{"types":"./lib/validators/*.d.ts","import":"./lib/esm/validators/*.js","require":"./lib/validators/*.js"},"./lib/validators/*":{"types":"./lib/validators/*.d.ts","import":"./lib/esm/validators/*.js","require":"./lib/validators/*.js"}},"gitHead":"d2541d67a4adf71b4062dc6bae0a565e51bba031","release":{"branches":["master","next"]},"scripts":{"lint":"eslint . --ext .ts --ignore-path .gitignore","test":"cross-env TEST=true TS_NODE_TRANSPILE_ONLY=true NODE_OPTIONS=--no-experimental-strip-types\\ --no-experimental-detect-module mocha -r ts-node/register ./tests/integration/*.ts ./tests/unit/*.ts","build":"rollup -c rollup.config.mjs","cover":"nyc npm test","commit":"git-cz && git push origin","prebuild":"npm run clean:build","clean:all":"npm run clean:build && npm run clean:modules","precommit":"npm run lint && npm run cover","test:mobx5":"npm install --no-save --force mobx@^5.15.0 && npm test","watch:test":"npm run test -- -w","clean:build":"rimraf lib && rimraf umd","watch:build":"rollup -c rollup.config.mjs --watch","clean:modules":"rimraf node_modules && npm cache clean","coverage:check":"nyc check-coverage --statements 95 --branches 80 --functions 86 --lines 90","coverage:report":"mkdir -p coverage && nyc --report-dir=coverage report --reporter=lcov > ./coverage/lcov.info","semantic-release":"semantic-release"},"_npmUser":{"name":"foxhound87","email":"savino87@gmail.com"},"overrides":{"serialize-javascript":"^7.1.0"},"collective":{"url":"https://opencollective.com/mobx-react-form","type":"opencollective"},"repository":{"url":"git+https://github.com/foxhound87/mobx-formkit.git","type":"git"},"_npmVersion":"10.9.8","description":"Reactive MobX Form State Management","directories":{},"sideEffects":false,"_nodeVersion":"22.22.3","dependencies":{"lodash":"^4.17.24","lodash-es":"^4.17.24"},"typesVersions":{"*":{"composer":["./lib/composer.d.ts"],"lib/utils":["./lib/utils.d.ts"],"lib/composer":["./lib/composer.d.ts"],"validators/*":["./lib/validators/*.d.ts"],"lib/validators/*":["./lib/validators/*.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.0.0","joi":"^17.13.3","nyc":"^17.1.0","yup":"^0.32.11","zod":"^3.25.0 || ^4.0.0","chai":"3.5.0","mobx":"^5.15.0 || ^6.3.3 || ^7.0.0","husky":"0.13.1","mocha":"^11.8.0","eslint":"^8.35.0","rimraf":"2.5.4","rollup":"^4.59.0","ts-node":"^10.5.0","valibot":"^1.4.2","cross-env":"^5.1.4","validator":"^13.15.20","commitizen":"^4.3.2","typescript":"^5.9.3","@types/chai":"^4.3.0","@types/node":"^17.0.18","validatorjs":"^3.15.1","@types/mocha":"^10.0.10","@vinejs/vine":"^4.4.0","@types/lodash":"^4.14.178","@types/validator":"^13.7.1","semantic-release":"^24.0.0","@types/validatorjs":"^3.15.0","@rollup/plugin-alias":"^6.0.0","eslint-plugin-import":"^2.27.5","@rollup/plugin-terser":"^1.0.0","@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-typescript":"^12.3.0","@typescript-eslint/parser":"^5.54.0","cz-conventional-changelog":"^3.3.0","@rollup/plugin-node-resolve":"^16.0.3","@typescript-eslint/eslint-plugin":"^5.54.0"},"peerDependencies":{"zod":"^3.25.0 || ^4.0.0","mobx":"^5.15.0 || ^6.0.0 || ^7.0.0"},"peerDependenciesMeta":{"zod":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mobx-formkit_1.0.0_1786867910425_0.9068199540266129","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"mobx-formkit","version":"1.1.0","keywords":["form","mobx","state","events","nested","fields","bindings","react","reactive","validation","validator","json","schema","declarative","rules"],"author":{"url":"https://twitter.com/foxhound87","name":"Claudio Savino","email":"claudio.savino@me.com"},"license":"MIT","_id":"mobx-formkit@1.1.0","maintainers":[{"name":"foxhound87","email":"savino87@gmail.com"}],"homepage":"https://github.com/foxhound87/mobx-formkit#readme","bugs":{"url":"https://github.com/foxhound87/mobx-formkit/issues"},"dist":{"shasum":"08283af0cc0eda519a002abe8b425f198a535232","tarball":"https://registry.npmjs.org/mobx-formkit/-/mobx-formkit-1.1.0.tgz","fileCount":263,"integrity":"sha512-HNvgGyRwiKRScCOlfha2YUzvdXdcaHDttdIFeIqGtfdLJBwV1sR5cNi7agP2SMMFComTC0tlHa/LTJFlO9J+Fg==","signatures":[{"sig":"MEUCIQC/pOjYHaAGBlHr4yPrbH+pF5AKWODMPXtRwTKElkA3sQIgVjQfMR1unXFesEAgP+wJo8p2/jymnA/hmjd/ZQUGYvQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4210806},"main":"./lib/index.js","types":"./lib/index.d.ts","config":{"commitizen":{"path":"cz-conventional-changelog"}},"module":"./lib/esm/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./lib/index.d.ts","import":"./lib/esm/index.js","require":"./lib/index.js"},"./composer":{"types":"./lib/composer.d.ts","import":"./lib/esm/composer.js","require":"./lib/composer.js"},"./devtools":{"types":"./lib/devtools.d.ts","import":"./lib/esm/devtools.js","require":"./lib/devtools.js"},"./lib/utils":{"types":"./lib/utils.d.ts","import":"./lib/esm/utils.js","require":"./lib/utils.js"},"./lib/composer":{"types":"./lib/composer.d.ts","import":"./lib/esm/composer.js","require":"./lib/composer.js"},"./validators/*":{"types":"./lib/validators/*.d.ts","import":"./lib/esm/validators/*.js","require":"./lib/validators/*.js"},"./lib/validators/*":{"types":"./lib/validators/*.d.ts","import":"./lib/esm/validators/*.js","require":"./lib/validators/*.js"}},"gitHead":"dbe21817202ea0dd006a3b1b4dea0b08a04a6118","release":{"branches":["master","next"]},"scripts":{"lint":"eslint . --ext .ts --ignore-path .gitignore","test":"cross-env TEST=true TS_NODE_TRANSPILE_ONLY=true NODE_OPTIONS=--no-experimental-strip-types\\ --no-experimental-detect-module mocha -r ts-node/register ./tests/integration/*.ts ./tests/unit/*.ts","build":"rollup -c rollup.config.mjs","cover":"nyc npm test","commit":"git-cz && git push origin","prebuild":"npm run clean:build","clean:all":"npm run clean:build && npm run clean:modules","precommit":"npm run lint && npm run cover","test:mobx5":"npm install --no-save --force mobx@^5.15.0 && npm test","watch:test":"npm run test -- -w","clean:build":"rimraf lib && rimraf umd","watch:build":"rollup -c rollup.config.mjs --watch","clean:modules":"rimraf node_modules && npm cache clean","coverage:check":"nyc check-coverage --statements 95 --branches 80 --functions 86 --lines 90","coverage:report":"mkdir -p coverage && nyc --report-dir=coverage report --reporter=lcov > ./coverage/lcov.info","semantic-release":"semantic-release"},"_npmUser":{"name":"foxhound87","email":"savino87@gmail.com"},"overrides":{"serialize-javascript":"^7.1.0"},"collective":{"url":"https://opencollective.com/mobx-react-form","type":"opencollective"},"repository":{"url":"git+https://github.com/foxhound87/mobx-formkit.git","type":"git"},"_npmVersion":"10.9.9","description":"Reactive MobX Form State Management","directories":{},"sideEffects":false,"_nodeVersion":"24.18.0","dependencies":{"lodash":"^4.17.24","lodash-es":"^4.17.24"},"typesVersions":{"*":{"composer":["./lib/composer.d.ts"],"devtools":["./lib/devtools.d.ts"],"lib/utils":["./lib/utils.d.ts"],"lib/composer":["./lib/composer.d.ts"],"validators/*":["./lib/validators/*.d.ts"],"lib/validators/*":["./lib/validators/*.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.0.0","joi":"^17.13.3","nyc":"^17.1.0","yup":"^0.32.11","zod":"^3.25.0 || ^4.0.0","chai":"3.5.0","mobx":"^5.15.0 || ^6.3.3 || ^7.0.0","husky":"0.13.1","mocha":"^11.8.0","eslint":"^8.35.0","rimraf":"2.5.4","rollup":"^4.59.0","ts-node":"^10.5.0","valibot":"^1.4.2","cross-env":"^5.1.4","validator":"^13.15.20","commitizen":"^4.3.2","typescript":"^5.9.3","@types/chai":"^4.3.0","@types/node":"^17.0.18","validatorjs":"^3.15.1","@types/mocha":"^10.0.10","@vinejs/vine":"^4.4.0","@types/lodash":"^4.14.178","@types/validator":"^13.7.1","semantic-release":"^24.0.0","@types/validatorjs":"^3.15.0","@rollup/plugin-alias":"^6.0.0","eslint-plugin-import":"^2.27.5","@rollup/plugin-terser":"^1.0.0","@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-typescript":"^12.3.0","@typescript-eslint/parser":"^5.54.0","cz-conventional-changelog":"^3.3.0","@rollup/plugin-node-resolve":"^16.0.3","@typescript-eslint/eslint-plugin":"^5.54.0"},"peerDependencies":{"zod":"^3.25.0 || ^4.0.0","mobx":"^5.15.0 || ^6.0.0 || ^7.0.0"},"peerDependenciesMeta":{"zod":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/mobx-formkit_1.1.0_1786907801000_0.03138542215002227","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"mobx-formkit","license":"MIT","version":"1.1.1","author":{"name":"Claudio Savino","email":"claudio.savino@me.com","url":"https://twitter.com/foxhound87"},"description":"Reactive MobX Form State Management","homepage":"https://github.com/foxhound87/mobx-formkit#readme","main":"./lib/index.js","module":"./lib/esm/index.js","types":"./lib/index.d.ts","sideEffects":false,"typesVersions":{"*":{"composer":["./lib/composer.d.ts"],"lib/composer":["./lib/composer.d.ts"],"devtools":["./lib/devtools.d.ts"],"validators/*":["./lib/validators/*.d.ts"],"lib/validators/*":["./lib/validators/*.d.ts"],"lib/utils":["./lib/utils.d.ts"]}},"exports":{".":{"types":"./lib/index.d.ts","import":"./lib/esm/index.js","require":"./lib/index.js"},"./composer":{"types":"./lib/composer.d.ts","import":"./lib/esm/composer.js","require":"./lib/composer.js"},"./devtools":{"types":"./lib/devtools.d.ts","import":"./lib/esm/devtools.js","require":"./lib/devtools.js"},"./validators/*":{"types":"./lib/validators/*.d.ts","import":"./lib/esm/validators/*.js","require":"./lib/validators/*.js"},"./lib/validators/*":{"types":"./lib/validators/*.d.ts","import":"./lib/esm/validators/*.js","require":"./lib/validators/*.js"},"./lib/composer":{"types":"./lib/composer.d.ts","import":"./lib/esm/composer.js","require":"./lib/composer.js"},"./lib/utils":{"types":"./lib/utils.d.ts","import":"./lib/esm/utils.js","require":"./lib/utils.js"}},"scripts":{"clean:build":"rimraf lib && rimraf umd","clean:modules":"rimraf node_modules && npm cache clean","clean:all":"npm run clean:build && npm run clean:modules","lint":"eslint . --ext .ts --ignore-path .gitignore","build":"rollup -c rollup.config.mjs","prebuild":"npm run clean:build","precommit":"npm run lint && npm run cover","commit":"git-cz && git push origin","watch:build":"rollup -c rollup.config.mjs --watch","watch:test":"npm run test -- -w","test":"cross-env TEST=true TS_NODE_TRANSPILE_ONLY=true NODE_OPTIONS=--no-experimental-strip-types\\ --no-experimental-detect-module mocha -r ts-node/register ./tests/integration/*.ts ./tests/unit/*.ts","test:mobx5":"npm install --no-save --force mobx@^5.15.0 && npm test","cover":"nyc npm test","coverage:check":"nyc check-coverage --statements 95 --branches 80 --functions 86 --lines 90","coverage:report":"mkdir -p coverage && nyc --report-dir=coverage report --reporter=lcov > ./coverage/lcov.info","semantic-release":"semantic-release"},"repository":{"type":"git","url":"git+https://github.com/foxhound87/mobx-formkit.git"},"bugs":{"url":"https://github.com/foxhound87/mobx-formkit/issues"},"collective":{"type":"opencollective","url":"https://opencollective.com/mobx-react-form"},"release":{"branches":["master","next"]},"keywords":["form","mobx","state","events","nested","fields","bindings","react","reactive","validation","validator","json","schema","declarative","rules"],"engines":{"node":">=18.0.0"},"config":{"commitizen":{"path":"cz-conventional-changelog"}},"overrides":{"serialize-javascript":"^7.1.0"},"dependencies":{"lodash":"^4.17.24","lodash-es":"^4.17.24"},"peerDependencies":{"mobx":"^5.15.0 || ^6.0.0 || ^7.0.0","zod":"^3.25.0 || ^4.0.0"},"peerDependenciesMeta":{"zod":{"optional":true}},"devDependencies":{"@rollup/plugin-alias":"^6.0.0","@rollup/plugin-commonjs":"^29.0.2","@rollup/plugin-node-resolve":"^16.0.3","@rollup/plugin-terser":"^1.0.0","@rollup/plugin-typescript":"^12.3.0","@types/chai":"^4.3.0","@types/lodash":"^4.14.178","@types/mocha":"^10.0.10","@types/node":"^17.0.18","@types/validator":"^13.7.1","@types/validatorjs":"^3.15.0","@typescript-eslint/eslint-plugin":"^5.54.0","@typescript-eslint/parser":"^5.54.0","@vinejs/vine":"^4.4.0","ajv":"^8.0.0","chai":"3.5.0","commitizen":"^4.3.2","cross-env":"^5.1.4","cz-conventional-changelog":"^3.3.0","eslint":"^8.35.0","eslint-plugin-import":"^2.27.5","husky":"0.13.1","joi":"^17.13.3","mobx":"^5.15.0 || ^6.3.3 || ^7.0.0","mocha":"^11.8.0","nyc":"^17.1.0","rimraf":"2.5.4","rollup":"^4.59.0","semantic-release":"^24.0.0","ts-node":"^10.5.0","typescript":"^5.9.3","valibot":"^1.4.2","validator":"^13.15.20","validatorjs":"^3.15.1","yup":"^0.32.11","zod":"^3.25.0 || ^4.0.0"},"_id":"mobx-formkit@1.1.1","gitHead":"bbb27749c9323b336dfe3dd80debb722c39cc36b","_nodeVersion":"24.18.0","_npmVersion":"10.9.9","dist":{"integrity":"sha512-R+9u0ia0d43/HCRJkiwjahjZbvILLxwttuUCb0DwaUKvMUBhk+F9Zsad1kRPbDaDStGn6h9WaGC23s4TRi4FoA==","shasum":"c116995d7859f9382e06cf41d8fc25d59b751200","tarball":"https://registry.npmjs.org/mobx-formkit/-/mobx-formkit-1.1.1.tgz","fileCount":263,"unpackedSize":4213686,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDPBPluSoUsrjbRx3GnbDRbMX3CkEr9yiT+7mNf4xiBTAiEAp6KERVVX5nizfcHAgPSdLTPTjZUdHFXmrWR48+0KObI="}]},"_npmUser":{"name":"foxhound87","email":"savino87@gmail.com"},"directories":{},"maintainers":[{"name":"foxhound87","email":"savino87@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mobx-formkit_1.1.1_1787065127563_0.5313688643664385"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-16T08:11:50.370Z","modified":"2026-08-18T14:58:47.983Z","1.0.0":"2026-08-16T08:11:50.582Z","1.1.0":"2026-08-16T19:16:41.173Z","1.1.1":"2026-08-18T14:58:47.741Z"},"bugs":{"url":"https://github.com/foxhound87/mobx-formkit/issues"},"author":{"name":"Claudio Savino","email":"claudio.savino@me.com","url":"https://twitter.com/foxhound87"},"license":"MIT","homepage":"https://github.com/foxhound87/mobx-formkit#readme","keywords":["form","mobx","state","events","nested","fields","bindings","react","reactive","validation","validator","json","schema","declarative","rules"],"repository":{"type":"git","url":"git+https://github.com/foxhound87/mobx-formkit.git"},"description":"Reactive MobX Form State Management","maintainers":[{"name":"foxhound87","email":"savino87@gmail.com"}],"readme":"# MobX Formkit\n\n**Reactive MobX Form State Management** — extensible validation, nested fields, event hooks, and bindings for any UI framework, with full TypeScript support.\n\n[Documentation](https://foxhound87.github.io/mobx-formkit/) &bull; [Quick Start](https://foxhound87.github.io/mobx-formkit/quick-start) &bull; [Live Demo](https://foxhound87.github.io/mobx-formkit-demo) &bull; [Demo Code](https://github.com/foxhound87/mobx-formkit-demo) &bull; [NPM](https://www.npmjs.com/package/mobx-formkit) &bull; [AI Skills](https://github.com/foxhound87/skills) &bull; [Discord](https://discord.gg/CVV8w4zat4)\n\n[![npm version](https://img.shields.io/npm/v/mobx-formkit?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/mobx-formkit)\n[![npm downloads](https://img.shields.io/npm/dm/mobx-formkit?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/mobx-formkit)\n[![license](https://img.shields.io/github/license/foxhound87/mobx-formkit?style=for-the-badge)](https://github.com/foxhound87/mobx-formkit/blob/master/LICENSE)\n[![bundle size](https://img.shields.io/badge/bundle%20size-~8%20kB%20gzip-e11d48?style=for-the-badge)](https://foxhound87.github.io/mobx-formkit/performance-ssr)\n[![documentation](https://img.shields.io/badge/docs-mobx--formkit-e11d48?style=for-the-badge)](https://foxhound87.github.io/mobx-formkit/)\n\nMobX Formkit is a form state management library built on MobX observables. The core is UI-agnostic — it depends only on `mobx` and renders in React, Vue 3, Lit, Angular, Solid, or vanilla JS through the matching MobX binding. Define your fields declaratively and get reactivity, validation, change tracking, and component bindings automatically.\n\nRead the [full documentation](https://foxhound87.github.io/mobx-formkit/) or jump straight to the [Quick Start](https://foxhound87.github.io/mobx-formkit/quick-start).\n\n## Features\n\n- **8 Validation Plugins** — [DVR, VJF, AJV, YUP, JOI, ZOD, VALIBOT & VINEJS](https://foxhound87.github.io/mobx-formkit/validation/plugins): sync & async, extendable, and mixable on the same form.\n- **Nested Fields & Arrays** — deeply nested [field structures](https://foxhound87.github.io/mobx-formkit/fields/) with dot notation, dynamic add/remove/move, ordered `ArrayMap` collections, and full serialization.\n- **Event Hooks & Handlers** — full lifecycle control: `onInit`, `onChange`, `onFocus`, `onBlur`, `onSubmit`, `onSuccess`, `onError` & [more](https://foxhound87.github.io/mobx-formkit/events/).\n- **UI-Agnostic Core** — the same `Form` instance renders in [React, Vue 3, Lit, Angular, Solid, Octane, or vanilla JS](https://foxhound87.github.io/mobx-formkit/frameworks) with a MobX binding.\n- **Field Props Bindings** — one-line [`bind()`](https://foxhound87.github.io/mobx-formkit/bindings/) for standard inputs, plus custom rewriters & templates for Material UI, Ant Design, React Aria, Headless UI, React Widgets, React Select, Chakra UI, PrimeReact & more.\n- **TypeScript First** — generics (`Form<F>`), typed field access, and [autocomplete for nested field paths](https://foxhound87.github.io/mobx-formkit/typescript).\n- **Reactive Computed Props** — [functional field props](https://foxhound87.github.io/mobx-formkit/extra/computed-props) that re-evaluate automatically when their MobX dependencies change.\n- **Forms Composer** — [orchestrate multiple forms](https://foxhound87.github.io/mobx-formkit/extra/composer) for wizards and multi-step flows with batch validate/submit/clear.\n- **Tiny & SSR-Ready** — ~8 kB gzip, tree-shakeable, zero DOM dependencies; works with Next.js, Remix, Vite & any [SSR setup](https://foxhound87.github.io/mobx-formkit/performance-ssr).\n- **MobX 5, 6 & 7** — one peer dependency range: `^5.15.0 || ^6.0.0 || ^7.0.0`.\n- **DevTools** — a dedicated [DevTools package & browser extension](https://foxhound87.github.io/mobx-formkit/devtools) to inspect form state, fields, and validation in real time.\n- **AI Agent Skills** — installable [skill files](https://foxhound87.github.io/mobx-formkit/skills) for Cursor, Windsurf, Claude Code, Codebuff & Copilot.\n\n## Quick Example\n\n```bash\nnpm install --save mobx-formkit\n```\n\n```javascript\nimport { Form } from \"mobx-formkit\";\nimport dvr from \"mobx-formkit/lib/validators/DVR\";\nimport validatorjs from \"validatorjs\";\n\nconst plugins = {\n  dvr: dvr({ package: validatorjs }),\n};\n\nconst fields = [\n  {\n    name: \"email\",\n    label: \"Email\",\n    placeholder: \"Insert Email\",\n    rules: \"required|email|string|between:5,25\",\n  },\n  {\n    name: \"password\",\n    label: \"Password\",\n    placeholder: \"Insert Password\",\n    rules: \"required|string|between:5,25\",\n    type: \"password\",\n  },\n  {\n    name: \"passwordConfirm\",\n    label: \"Password Confirmation\",\n    placeholder: \"Confirm Password\",\n    rules: \"required|string|same:password\",\n    type: \"password\",\n  },\n];\n\nconst hooks = {\n  onSuccess(form) {\n    alert(\"Form is valid! Send the request here.\");\n  },\n  onError(form) {\n    alert(\"Form has errors!\");\n  },\n};\n\nconst form = new Form({ fields }, { plugins, hooks });\n```\n\n```jsx\nimport React from \"react\";\nimport { observer } from \"mobx-react\";\n\nexport default observer(({ form }) => (\n  <form onSubmit={form.onSubmit}>\n    <label htmlFor={form.$(\"email\").id}>{form.$(\"email\").label}</label>\n    <input {...form.$(\"email\").bind()} />\n    <p>{form.$(\"email\").error}</p>\n\n    <button type=\"submit\">Submit</button>\n    <button type=\"button\" onClick={form.onClear}>\n      Clear\n    </button>\n    <button type=\"button\" onClick={form.onReset}>\n      Reset\n    </button>\n\n    <p>{form.error}</p>\n  </form>\n));\n```\n\nFollow the [full Quick Start guide](https://foxhound87.github.io/mobx-formkit/quick-start) or the [class-based setup](https://foxhound87.github.io/mobx-formkit/quick-start-class) for the complete walkthrough.\n\n## Documentation\n\n| Topic | Links |\n| --- | --- |\n| **Getting Started** | [Quick Start](https://foxhound87.github.io/mobx-formkit/quick-start) &middot; [Class-based Setup](https://foxhound87.github.io/mobx-formkit/quick-start-class) &middot; [TypeScript](https://foxhound87.github.io/mobx-formkit/typescript) &middot; [UMD Setup](https://foxhound87.github.io/mobx-formkit/umd-setup) |\n| **Form & Fields** | [Form Instance](https://foxhound87.github.io/mobx-formkit/form/) &middot; [Form Options](https://foxhound87.github.io/mobx-formkit/form/form-options) &middot; [Defining Fields](https://foxhound87.github.io/mobx-formkit/fields/) |\n| **Actions** | [Form Actions](https://foxhound87.github.io/mobx-formkit/actions/form) &middot; [Get, Set & Update](https://foxhound87.github.io/mobx-formkit/actions/get-set) &middot; [Add, Delete & Move](https://foxhound87.github.io/mobx-formkit/actions/add-del) &middot; [Validation & Submit](https://foxhound87.github.io/mobx-formkit/actions/validate) |\n| **Validation** | [Choosing a Plugin](https://foxhound87.github.io/mobx-formkit/validation/) &middot; [Plugins & Packages](https://foxhound87.github.io/mobx-formkit/validation/plugins) &middot; [Validation Lifecycle](https://foxhound87.github.io/mobx-formkit/validation/lifecycle) |\n| **Events** | [Event Handlers](https://foxhound87.github.io/mobx-formkit/events/event-handlers) &middot; [Event Hooks](https://foxhound87.github.io/mobx-formkit/events/event-hooks) &middot; [Validation Hooks](https://foxhound87.github.io/mobx-formkit/events/validation-hooks) |\n| **Bindings** | [Default Bindings](https://foxhound87.github.io/mobx-formkit/bindings/default) &middot; [Custom Bindings](https://foxhound87.github.io/mobx-formkit/bindings/custom) |\n| **API Reference** | [Form Properties](https://foxhound87.github.io/mobx-formkit/api-reference/form-properties) &middot; [Form Methods](https://foxhound87.github.io/mobx-formkit/api-reference/form-methods) &middot; [Fields Properties](https://foxhound87.github.io/mobx-formkit/api-reference/fields-properties) &middot; [Fields Methods](https://foxhound87.github.io/mobx-formkit/api-reference/fields-methods) |\n| **Advanced** | [Overview](https://foxhound87.github.io/mobx-formkit/advanced/) &middot; [Wizard (multi-step)](https://foxhound87.github.io/mobx-formkit/advanced/wizard) &middot; [Sortable Lists](https://foxhound87.github.io/mobx-formkit/advanced/sortable) &middot; [File Upload](https://foxhound87.github.io/mobx-formkit/advanced/file-upload) |\n| **Extra** | [Computed Props](https://foxhound87.github.io/mobx-formkit/extra/computed-props) &middot; [Input & Output Converters](https://foxhound87.github.io/mobx-formkit/extra/converters) &middot; [Forms Composer](https://foxhound87.github.io/mobx-formkit/extra/composer) &middot; [Recipes & Patterns](https://foxhound87.github.io/mobx-formkit/recipes) &middot; [Troubleshooting & FAQ](https://foxhound87.github.io/mobx-formkit/troubleshooting) |\n| **Guides** | [Migration Guide](https://foxhound87.github.io/mobx-formkit/migration-guide) &middot; [Error Handling](https://foxhound87.github.io/mobx-formkit/error-handling) &middot; [Performance & SSR](https://foxhound87.github.io/mobx-formkit/performance-ssr) &middot; [Render Engine Support](https://foxhound87.github.io/mobx-formkit/frameworks) |\n| **Ecosystem** | [DevTools](https://foxhound87.github.io/mobx-formkit/devtools) &middot; [AI Agent Skills](https://foxhound87.github.io/mobx-formkit/skills) &middot; [Live Demo](https://foxhound87.github.io/mobx-formkit-demo) |\n\n## Legacy: mobx-react-form (MRF)\n\nMobX Formkit is the successor of [**mobx-react-form**](https://www.npmjs.com/package/mobx-react-form) (MRF). The legacy package has been **renamed and deprecated on npm** — the codebase and its API continue here. To migrate, swap the package and update your imports:\n\n```bash\nnpm uninstall mobx-react-form\nnpm install --save mobx-formkit\n```\n\n[![mobx-react-form version](https://img.shields.io/npm/v/mobx-react-form?style=for-the-badge&label=mobx-react-form&logo=npm)](https://www.npmjs.com/package/mobx-react-form)\n[![legacy weekly downloads](https://img.shields.io/npm/dw/mobx-react-form?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/mobx-react-form)\n[![legacy monthly downloads](https://img.shields.io/npm/dm/mobx-react-form?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/mobx-react-form)\n\nAs of August 2026, the final legacy release (`mobx-react-form@7.1.0`) still sees **~8.0k downloads/week**, **~47.4k downloads/month**, and **~664k downloads/year** (npm API). If you are still on MRF, this is the drop-in replacement.\n\nSee the [Migration Guide](https://foxhound87.github.io/mobx-formkit/migration-guide) on the docs for breaking changes across major versions.\n\n## Contributing\n\n1. Fork the repository\n2. Make applicable changes (with tests!)\n3. To run tests: `npm run test`\n4. Ensure builds succeed: `npm run build`\n5. Commit and run pre-commit checks: `npm run commit`\n\n### New Issues\n\nWhen opening new issues, provide the setup of your form in a [CodeSandbox](https://codesandbox.io/).\n\nThese issues, and the ones which provides also PR with failing tests will get higher priority.\n\n### Contributors\n\nThis project exists thanks to all the people who contribute.\n\n<a href=\"https://github.com/foxhound87/mobx-formkit/graphs/contributors\"><img src=\"https://contrib.rocks/image?repo=foxhound87/mobx-formkit\" /></a>\n\n### Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/mobx-formkit#backer)]\n\n<a href=\"https://opencollective.com/mobx-formkit#backers\" target=\"_blank\"><img src=\"https://opencollective.com/mobx-formkit/backers.svg?width=890\"></a>\n\n### Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/mobx-formkit#sponsor)]\n\n<a href=\"https://opencollective.com/mobx-formkit#sponsors\" target=\"_blank\"><img src=\"https://opencollective.com/mobx-formkit/sponsors.svg?width=890\"></a>\n\n## License\n\n[MIT](https://github.com/foxhound87/mobx-formkit/blob/master/LICENSE) &copy; [Claudio Savino](https://github.com/foxhound87)\n","readmeFilename":"README.md"}