{"id":13880888,"url":"https://github.com/formstjs/formst","last_synced_at":"2025-07-16T17:31:17.289Z","repository":{"id":54091974,"uuid":"333721042","full_name":"formstjs/formst","owner":"formstjs","description":"Model-driven Form library for React","archived":false,"fork":false,"pushed_at":"2021-03-09T13:44:48.000Z","size":1033,"stargazers_count":93,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-02T22:06:16.451Z","etag":null,"topics":["form","forms","geekyants","mobx","mobx-state-tree","mst","react-apps"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/formstjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-28T10:17:20.000Z","updated_at":"2023-03-04T04:41:15.000Z","dependencies_parsed_at":"2022-08-13T06:40:32.669Z","dependency_job_id":null,"html_url":"https://github.com/formstjs/formst","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/formstjs/formst","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formstjs%2Fformst","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formstjs%2Fformst/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formstjs%2Fformst/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formstjs%2Fformst/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/formstjs","download_url":"https://codeload.github.com/formstjs/formst/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formstjs%2Fformst/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265527547,"owners_count":23782480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","forms","geekyants","mobx","mobx-state-tree","mst","react-apps"],"created_at":"2024-08-06T08:03:36.083Z","updated_at":"2025-07-16T17:31:16.913Z","avatar_url":"https://github.com/formstjs.png","language":"TypeScript","readme":"### 1) Introduction\n\n**Formst** is a model-driven library for quickly building high-performance forms in React. Unlike most form libraries that are UI-First, Formst is **Data-First**.\n\n### 2) Motivation:\n\nWhile working on a recent project, [GeekyAnts](https://geekyants.com) devs realised that there was no easy way to build forms for React apps. Yes, there are solutions available but they're not quite optimal. It is difficult to find a single library that provides great UX, speed and features such as interdependency between form fields. That's when we decided to build Formst, a library that allows you to build high-performance, responsive forms for your React apps.\n\n### 3) Features\n\n- **High-performance**: \\**\\*\\*Formst is MST-based which makes it *fast* and *powerful\\*.\n- **Responsive**: Create _responsive_ forms for your React apps _with ease_.\n- **Forms for Everything**: Build _flat_, _stepper_ or _nested_ forms based on your app needs.\n- **Middleware**: Use middleware to _modify form behaviour_ such as pre-processing input values.\n\n### 4) Installation\n\nUse 'yarn' or 'npm' to install this library as shown below:\n\n```bash\n# yarn\nyarn add mst-form-creator\n\n# npm\nnpm add mst-form-creator\n```\n\n### 5) Dependencies\n\nMobX, mobx-react/mobx-react-lite and MobX-state-tree.\n\n### 6) Usage\n\n- Create a form model as shown below:\n\n  ```tsx\n  const TodoForm = createFormModel(\n    'TodoForm',\n    {\n      title: types.string,\n      description: types.string,\n    },\n\n    {\n      validation: {\n        title: ['required'],\n        description: 'required',\n      },\n    }\n  ).actions(self =\u003e ({\n    onSubmit: () =\u003e {\n      setTimeout(() =\u003e {\n        alert(JSON.stringify(getSnapshot(self), null, 2));\n      }, 100);\n    },\n  }));\n  ```\n\n- Create an instance of the model:\n\n  ```tsx\n  const todoForm = TodoForm.create({\n    title: '',\n    description: '',\n  });\n  ```\n\n- Wrap the components inside _MSTForm_ and use the _Field_ API to render the fields:\n\n  ```tsx\n  \u003cMSTForm formInstance={todoForm}\u003e\n    \u003cform onSubmit={todoForm.handleSubmit}\u003e\n      \u003cField name=\"title\" /\u003e\n      \u003cErrorMessage name=\"title\" /\u003e\n\n      \u003cField name=\"description\" /\u003e\n      \u003cErrorMessage name=\"description\" /\u003e\n\n      \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/MSTForm\u003e\n  ```\n\n### 7) Example\n\n[This simple login form](https://codesandbox.io/s/formst-demo-ffw8v) will take two inputs that are validated on submission. It can also display specific error messages for invalid input values.\n\n### 8) Tech Stack\n\nReact \u0026 Javascript.\n\n### 9) Contributors\n\n- Aditya Jamuar ([@GeekJamuar](https://twitter.com/geekjamuar?lang=en))\n- Sanket Sahu ([@sanketsahu](https://twitter.com/sanketsahu))\n- Himanshu Satija ([@HimanshuSatija\\_](https://twitter.com/HimanshuSatija_))\n- Meenu Makkar ([@meenu_makkar](https://twitter.com/makkar_meenu))\n- Vidhi Kataria ([@VidhiKataria2](https://twitter.com/vidhikataria2?lang=en))\n- Gaurav Guha ([@greedy_reader](https://twitter.com/greedy_reader?lang=en))\n\n### 10) How to Contribute\n\nThank you for your interest in contributing to Formst! We are lucky to have you 🙂 Head over to [Contribution Guidelines](https://github.com/formstjs/formst/blob/master/CONTRIBUTING.md) and learn how you can be a part of a wonderful, growing community.\n\nFor major changes, please open an issue first to discuss changes and update tests as appropriate.\n\n### 11) License\n\nLicensed under the MIT License, Copyright © 2020 GeekyAnts. See [LICENSE](https://github.com/formstjs/formst/blob/master/LICENSE) for more information.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformstjs%2Fformst","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformstjs%2Fformst","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformstjs%2Fformst/lists"}