{"id":17770641,"url":"https://github.com/ajainvivek/react-aztec","last_synced_at":"2025-07-19T14:33:41.727Z","repository":{"id":75915365,"uuid":"74708668","full_name":"ajainvivek/react-aztec","owner":"ajainvivek","description":"🔥 Material UI based dynamic form component for React using JSON","archived":false,"fork":false,"pushed_at":"2017-08-17T04:49:14.000Z","size":3665,"stargazers_count":37,"open_issues_count":6,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-20T07:07:28.109Z","etag":null,"topics":["dynamic-forms","json","json-forms","material-dynamic-form","material-ui","react","schema"],"latest_commit_sha":null,"homepage":"https://ajainvivek.github.io/react-aztec/#/","language":"JavaScript","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/ajainvivek.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-24T22:26:45.000Z","updated_at":"2021-09-09T15:48:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"243c7f16-fecb-42d7-a211-032d50c01889","html_url":"https://github.com/ajainvivek/react-aztec","commit_stats":{"total_commits":119,"total_committers":4,"mean_commits":29.75,"dds":"0.050420168067226934","last_synced_commit":"1e207fcc7cf90b5636a48f662f36514023dee69b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ajainvivek/react-aztec","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-aztec","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-aztec/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-aztec/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-aztec/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ajainvivek","download_url":"https://codeload.github.com/ajainvivek/react-aztec/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ajainvivek%2Freact-aztec/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265947500,"owners_count":23853382,"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":["dynamic-forms","json","json-forms","material-dynamic-form","material-ui","react","schema"],"created_at":"2024-10-26T21:24:16.432Z","updated_at":"2025-07-19T14:33:41.664Z","avatar_url":"https://github.com/ajainvivek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"http://i.imgur.com/cNIJLXW.png\" alt=\"react-aztec\" width=\"200\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n[![GitHub issues](https://img.shields.io/github/issues/ajainvivek/react-aztec.svg)](https://github.com/ajainvivek/react-aztec/issues)\n[![npm version](https://img.shields.io/npm/v/react-aztec.svg?style=flat)](https://www.npmjs.com/package/react-aztec)\n\nBuild dynamic forms using Material UI\n\n\u003e Check demo \u0026 detail docs [Documentation](http://ajainvivek.github.io/react-aztec/#/simpleform)\n\n\u003e Build dynamic forms using interactive editor [Playground](http://ajainvivek.github.io/react-aztec/#/playground)\n\n## Installation\n\n`npm install material-ui --save`\n`npm install react-aztec --save`\n\n### Basic Usage\n\nRefer [Material-UI](http://www.material-ui.com/) documentation for components props\n\n```javascript\nimport { TextField } as MUI from 'material-ui';\nimport { Aztec } from 'react-aztec';\n\nconst formData = [\n  {\n    id: \"name\",\n    type: 'textfield',\n    props: {\n      id: 'name',\n      floatingLabelText: 'Hello, Whats your name?',\n      hintText: 'Name is required'\n    }\n  }  \n];\n\nclass SimpleForm extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cAztec\n          guid=\"unique-id\"\n          data={formData}\n          library={MUI}\n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n### Usage with form validation\n\n```javascript\nimport * as MUI from 'material-ui';\nimport { Aztec } from 'react-aztec';\n\nconst formData = [\n  {\n    id: \"name\",\n    type: 'textfield',\n    props: {\n      id: 'name',\n      floatingLabelText: 'Hello, Whats your name?',\n      hintText: 'Name is required'\n    },\n    rules: {\n      validation: [\n        {\n          rule: 'mandatory', //email, lowercase, mobile\n          message: 'Name is required!!' // on error message to be displayed\n        }\n      ]\n    }\n  }  \n];\n\nclass SimpleForm extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cAztec\n          guid=\"unique-id\"\n          data={formData}\n          library={MUI}\n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n### Usage with form layout\n\nAztec uses bootstrap 24 column grid layout\n\n```javascript\nimport * as MUI from 'material-ui';\nimport { Aztec } from 'react-aztec';\n\nconst formData = [\n  {\n    id: \"name\",\n    type: 'textfield',\n    props: {\n      id: 'name',\n      floatingLabelText: 'Hello, Whats your name?',\n      hintText: 'Name is required'\n    },\n    layout: {\n      row: 1,\n      xs: {\n        col:24\n      },\n      sm: {\n        col:24\n      },\n      md: {\n        col:12\n      },\n      lg: {\n        col:8\n      }\n    }\n  }  \n];\n\nclass SimpleForm extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cAztec\n          guid=\"unique-id\"\n          data={formData}\n          library={MUI}\n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Contribute\n\nIf you have a feature request, please add it as an issue or make a pull request.\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajainvivek%2Freact-aztec","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fajainvivek%2Freact-aztec","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fajainvivek%2Freact-aztec/lists"}