{"id":15013033,"url":"https://github.com/wtnm/fform","last_synced_at":"2025-04-12T04:20:51.196Z","repository":{"id":57234962,"uuid":"179603746","full_name":"wtnm/fform","owner":"wtnm","description":"Flexibile and extendable form builder with constructor","archived":false,"fork":false,"pushed_at":"2020-08-11T20:07:35.000Z","size":3420,"stargazers_count":27,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T23:51:17.490Z","etag":null,"topics":["form","form-builder","json-schema","jsonschema","react","redux","schema","ssr"],"latest_commit_sha":null,"homepage":"https://wtnm.github.io/fform-constructor/index.html","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/wtnm.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-05T01:44:24.000Z","updated_at":"2024-02-06T11:47:54.000Z","dependencies_parsed_at":"2022-08-23T16:30:55.446Z","dependency_job_id":null,"html_url":"https://github.com/wtnm/fform","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtnm%2Ffform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtnm%2Ffform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtnm%2Ffform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wtnm%2Ffform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wtnm","download_url":"https://codeload.github.com/wtnm/fform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248218271,"owners_count":21066860,"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","form-builder","json-schema","jsonschema","react","redux","schema","ssr"],"created_at":"2024-09-24T19:43:38.125Z","updated_at":"2025-04-12T04:20:51.168Z","avatar_url":"https://github.com/wtnm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Table of content\n\n\u003c!-- toc --\u003e\n\n- [Overview](#overview)\n    + [Features](#features)\n- [Installation \u0026 Usage](#installation--usage)\n    + [Without JSON validaton](#without-json-validaton)\n    + [With JSON validaton](#with-json-validaton)\n- [Tutorial](#tutorial)\n- [Examples](#examples)\n- [Documentation](#documentation)\n\n\u003c!-- tocstop --\u003e\n\n## Overview\nFlexible Form (`fform`) - form builder with minimum redundancy, maximum flexibility, and extendability. It uses **JSONSchema** to describe forms, **React** (v16) for rendering and has native **Redux** support for state storage but can be used with any other external storage or can use only internal storage (storage agnostic).\n\nSee [fform-constructor](https://wtnm.github.io/fform-constructor/index.html) for live demo.\n\n#### Features\n- **98kb** minified, **28kb** gziped\n- [form-constuctor](https://wtnm.github.io/fform-constructor/index.html) for quick start\n- form extension, combination and reuse with JSONSchema's `allOf`, `oneOf`, `$ref` properties\n- sync/async/JSON/submit validation\n- storage agnostic, native redux support, can be used with any external storage or can use own internal storage\n- built-in arrays (add/del/move operations)\n- built-in viewer\n- fully customizable\n- SSR support\n\n\n## Installation \u0026 Usage\n\nTo install the stable version:\n\n```\nnpm install --save fform\n```\n\nThis assumes that you are using [npm](https://www.npmjs.com/) with a module bundler like [webpack](https://webpack.js.org/)\n\n\n#### Without JSON validaton\n\n```js\nimport {FForm, elements} from 'fform';\nimport {render} from 'react-dom';\n\nrender(\u003cFForm core={{name:\"name\", schema: {type:\"string\"}, elements}}/\u003e, document.querySelector('#root'));\n```\n\n#### With JSON validaton\n\n```js\nimport {FForm, elements} from 'fform';\nimport {render} from 'react-dom';\n\nimport imjvWrapper from 'fform/addons/imjvWrapper';\nimport * as imjvValidator from 'fform/addons/is-my-json-valid-lite';\nconst JSONValidator = imjvWrapper(imjvValidator);\n\nrender(\u003cFForm core={{name:\"name\", schema: {type:\"string\"}, elements, JSONValidator}}/\u003e,\n\t\tdocument.querySelector('#root'));\n```\n\nHow to use with different storages see in [documentation](documentation.md#redux-storage)\n## [Tutorial](https://github.com/wtnm/fform/blob/master/tutorial.en.md)\n## Examples\n\u003c!-- toc-examples --\u003e\n\n- [simple form](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=0)\n- [layouts and viewer](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=1)\n- [arrays and oneOf](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=2)\n- [stateMaps](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=3)\n- [validation](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=4)\n- [format and parse](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=5)\n- [schema exten](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=6)\n- [custom input](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=7)\n- [tabs and steps](https://wtnm.github.io/fform-constructor/index.html#url=examples.json\u0026selector=8)\n\n\u003c!-- tocstop --\u003e\n\n\n## Documentation\n\u003c!-- toc-docs --\u003e\n\n- [FForm](documentation.md#fform)\n    + [FForm methods and properties](documentation.md#fform-methods-and-properties)\n- [fformCores](documentation.md#fformcores)\n  * [Storages](documentation.md#storages)\n    + [Redux storage](documentation.md#redux-storage)\n    + [External storage](documentation.md#external-storage)\n    + [Internal storage](documentation.md#internal-storage)\n  * [Path](documentation.md#path)\n  * [Data object](documentation.md#data-object)\n- [API](documentation.md#api)\n    + [`get(...paths: string | string[]`)](documentation.md#getpaths-string--string)\n    + [`set(path: string | string[], value: any, opts?: setOpts )`](documentation.md#setpath-string--string-value-any-opts-setopts-)\n    + [`getValue(opts?: getValueOpts)`](documentation.md#getvalueopts-getvalueopts)\n    + [`setValue(value: any, opts?: setValueOpts)`](documentation.md#setvaluevalue-any-opts-setvalueopts)\n    + [`getDefaultValue()`](documentation.md#getdefaultvalue)\n    + [`reset(opts?: resetOpts)`](documentation.md#resetopts-resetopts)\n    + [`clear(opts?: clearOpts)`](documentation.md#clearopts-clearopts)\n    + [`validate(path: boolean | string | string[], opts?: APIOptsType)`](documentation.md#validatepath-boolean--string--string-opts-apioptstype)\n    + [`arrayAdd(path: string | string[], value: number | any[], opts?: APIOptsType)`](documentation.md#arrayaddpath-string--string-value-number--any-opts-apioptstype)\n    + [`arrayItemOps(path: string | string[], op: string, opts: arrayItemOpts)`](documentation.md#arrayitemopspath-string--string-op-string-opts-arrayitemopts)\n    + [`setHidden(path: string | string[], value?: boolean, opts?: APIOptsType)`](documentation.md#sethiddenpath-string--string-value-boolean-opts-apioptstype)\n    + [`showOnly(path: string | string[], opts?: APIOptsType)`](documentation.md#showonlypath-string--string-opts-apioptstype)\n    + [`getActive()`](documentation.md#getactive)\n    + [`execute()`](documentation.md#execute)\n- [Basic schema properties](documentation.md#basic-schema-properties)\n    + [Metadata](documentation.md#metadata)\n    + [Number Validation](documentation.md#number-validation)\n    + [String Validation](documentation.md#string-validation)\n    + [Array Validation](documentation.md#array-validation)\n    + [Object Validation](documentation.md#object-validation)\n    + [Combining Schemas](documentation.md#combining-schemas)\n- [Extended schema properties](documentation.md#extended-schema-properties)\n    + [`_placeholder?: string`](documentation.md#_placeholder-string)\n    + [`_params?: FFParamsType`](documentation.md#_params-ffparamstype)\n    + [`_data?: any`](documentation.md#_data-any)\n    + [`_presets?: string`](documentation.md#_presets-string)\n    + [`_simple?: boolean`](documentation.md#_simple-boolean)\n    + [`_enumExten?: { [key: string]: undefined | string | object }`](documentation.md#_enumexten--key-string-undefined--string--object-)\n    + [`_stateMaps?: Array`](documentation.md#_statemaps-array-)\n    + [`_validators?: Array`](documentation.md#_validators-array)\n    + [`_oneOfSelector: string | dataHandler`](documentation.md#_oneofselector-string--datahandler)\n    + [`_custom?: FFCustomizeType`](documentation.md#_custom-ffcustomizetype)\n    + [`_layout?: FFLayoutCustomizeType`](documentation.md#_layout-fflayoutcustomizetype)\n    + [`_strictLayout?: boolean`](documentation.md#_strictlayout-boolean)\n- [Validation](documentation.md#validation)\n    + [JSON validation](documentation.md#json-validation)\n    + [Sync/async validation](documentation.md#syncasync-validation)\n- [Field structure and customization](documentation.md#field-structure-and-customization)\n- [Form layout](documentation.md#form-layout)\n- [Elements](documentation.md#elements)\n    + [Props processing](documentation.md#props-processing)\n    + [Data handlers](documentation.md#data-handlers)\n    + [$_maps](documentation.md#_maps-)\n    + [Structure](documentation.md#structure)\n- [Styling](documentation.md#styling)\n- [SSR](documentation.md#ssr)\n\n\u003c!-- tocstop --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwtnm%2Ffform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwtnm%2Ffform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwtnm%2Ffform/lists"}