15.9K ·GitHub
What is this?
It is a React component that builds complete web forms from a JSON Schema: you describe your fields declaratively and it renders and validates the form for you.
It is a React component that builds complete web forms from a JSON Schema: you describe your fields declaratively and it renders and validates the form for you.Is this a hosted form builder, or a library I add to my own React app?It is a library: you install the @rjsf npm packages and render its Form component inside your own React app. The only hosted part is a browser playground for trying it out.
It is a library: you install the @rjsf npm packages and render its Form component inside your own React app. The only hosted part is a browser playground for trying it out.How do I get it into my project?Install @rjsf/core from npm together with a theme package for your UI kit and a validator, then render the Form component with your JSON Schema. Full docs are powered by Docusaurus.
Install @rjsf/core from npm together with a theme package for your UI kit and a validator, then render the Form component with your JSON Schema. Full docs are powered by Docusaurus.Besides React, what else do I need to pull in?A theme package matching your component library plus a JSON Schema validator: @rjsf/validator-ajv8, @rjsf/validator-ata or @rjsf/validator-cfworker.
A theme package matching your component library plus a JSON Schema validator: @rjsf/validator-ajv8, @rjsf/validator-ata or @rjsf/validator-cfworker.What does 'build forms from JSON Schema' mean in practice — do I code every field by hand?You supply a JSON Schema describing your data and rules; the component generates the matching form fields from it automatically — that is the point of doing it declaratively.
You supply a JSON Schema describing your data and rules; the component generates the matching form fields from it automatically — that is the point of doing it declaratively.Can I try it before installing anything?Yes — a live playground is hosted on GitHub Pages, so you can sketch a schema and see the resulting form right in the browser.
Yes — a live playground is hosted on GitHub Pages, so you can sketch a schema and see the resulting form right in the browser.Which component libraries can forms be themed with?Ten themes ship as packages: Ant Design v5, Bootstrap 3 and 5 (via React-Bootstrap), Chakra UI v3, Daisy UI v5, Fluent UI v9, Mantine, Material UI v7, Semantic UI v2 and Shad CN.
Ten themes ship as packages: Ant Design v5, Bootstrap 3 and 5 (via React-Bootstrap), Chakra UI v3, Daisy UI v5, Fluent UI v9, Mantine, Material UI v7, Semantic UI v2 and Shad CN.Is it mature enough to rely on in production?It has been developed since 2015, counts about 16,000 GitHub stars, is Apache-2.0 licensed, and ships from a monorepo with CI, tests and TypeScript type checking.
It has been developed since 2015, counts about 16,000 GitHub stars, is Apache-2.0 licensed, and ships from a monorepo with CI, tests and TypeScript type checking.What are similar projects?formily, redux-form, react-bootstrap, selectize.js, formik, ajv, primitives, evergreen
formily, redux-form, react-bootstrap, selectize.js, formik, ajv, primitives, evergreenWhich topics is it in?declarative-ui, data-validation, antd, form, json-schema, forms, schema, bootstrap, validation, component-library, json, ui-components
declarative-ui, data-validation, antd, form, json-schema, forms, schema, bootstrap, validation, component-library, json, ui-components