Next Rjsf Form Builder

Build Modern React Forms with ShadCN RJSF Theme and Builder

This project offers a dedicated theme to apply ShadCN's modern aesthetics to forms generated by react-jsonschema-form (RJSF). Developers can leverage this theme to quickly style their RJSF instances, ensuring a consistent and visually appealing user interface. Furthermore, it includes an integrated form builder, simplifying the process of designing and configuring complex forms directly within your React application, enhancing development workflow and user experience with familiar ShadCN components.

Features:

• ShadCN Theme for RJSF: Styles react-jsonschema-form components using ShadCN UI, providing a modern look and feel.
• Integrated Form Builder: Allows visual construction and configuration of RJSF schemas through an intuitive interface.
• RJSF v5 Compatibility: Ensures seamless integration with version 5 of the react-jsonschema-form library.
• Schema Configuration Interface: Provides UI tools for defining field properties such as title, type, validation rules (e.g., required, length, range), and nullability.
• Dynamic Group Management in Builder: Supports the creation and removal of field groups within the form structure.
• Field Addition in Builder: Enables developers to easily add and define individual fields in the form schema.
• Live Form Preview: Offers a real-time display of the form as it is being constructed or modified in the builder.
• JSON Schema Viewer: Displays the underlying JSON schema that is generated by the form builder.
• Real-time Data Update View: Shows live updates to the form's data object as users interact with form fields.
• Submission Data Inspector: Allows developers to view the structured data payload upon form submission for testing and debugging.
• Broad RJSF Feature Styling: Applies consistent ShadCN styling to various RJSF capabilities, including nested arrays, widgets, conditional logic (AnyOf, OneOf), and validation messages.
• UI Options Customization: Provides controls to adjust UI elements and behaviors, tailoring the form's appearance and interaction.
• Support for Diverse Data Types: Handles a wide array of data types essential for forms, such as strings, numbers, booleans, arrays, and objects.
• Error Schema Visualization: Clearly presents form validation errors and associated messages to the user.
• Default Value Handling: Supports the specification and rendering of default values for form fields.

Summary:

This tool provides developers with a ShadCN UI theme for react-jsonschema-form, significantly enhancing the visual appeal of dynamically generated forms. It also features an integrated form builder, which simplifies the creation and iterative configuration of complex JSON schemas. This combination allows for rapid development of modern, styled forms within React applications, leveraging the power of RJSF and the aesthetics of ShadCN, complete with live previews and data inspection capabilities to streamline the development process.