No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

json-formkit: A Flexible and Customizable Form Builder

Welcome to the documentation for json-formkit, a powerful and easy-to-use form builder component! This package allows you to dynamically generate forms based on a schema definition, making it ideal for a wide variety of use cases. Whether you're handling user input, creating surveys, or building more complex forms, json-formkit offers the flexibility you need with minimal effort.

Install the Package

To get started with json-formkit, simply install it using npm:

npm i json-formkit

Once installed, you can easily import and use the form builder component in your React project.

Try It Now

To see json-formkit in action, click here.

Key Features

  • Dynamic Form Generation: Generate forms based on JSON schema definitions, eliminating the need to manually write individual form fields.
  • Highly Customizable: Customize form fields, validation rules, and UI components according to your needs.
  • Simple Integration: Easily integrate with your existing React projects, regardless of complexity.
  • Supports Multiple Field Types: From text inputs to checkboxes, radio buttons, dropdowns, and more, json-formkit supports various form controls.

Example Usage

Here is an example of how to use json-formkit in your React component:

import React from 'react'; import JsonFormKit from 'json-formkit'; const schema = { fields: [ { field: "label", label: "Description" }, { field: "textarea", name: "description", props: { rows: 4, cols: 50, defaultValue: "This is the initial value", }, }, { field: "submit", label: "Submit", props: { type: "submit" }, blockProps: { style: { marginTop: "0.5rem", display: "flex", justifyContent: "flex-end", }, }, }, ], }; function App() { return <JsonFormKit schema={schema} />; } export default App;

This simple example renders a form based on the provided JSON schema. json-formkit automatically handles the form structure, validation, and dynamic rendering of fields.

Customize Your Form

With json-formkit, customizing your form is simple and flexible. You can define custom input types, use built-in validation methods, and apply custom themes to make your forms fit the look and feel of your application.

Use Cases

Here are some common use cases for json-formkit:

  • User Input Forms: Quickly generate forms for capturing user information, such as sign-up forms, contact forms, etc.
  • Surveys and Polls: Create customizable surveys with various field types (radio buttons, checkboxes, etc.).
  • Admin Dashboards: Use the schema-driven approach to build forms that integrate seamlessly with your backend system.