Henso is an elegant and tiny form generator that creates forms based on a JSON schema. It is framework-agnostic, making it versatile and easy to integrate into various projects.
- JSON Schema Support: Generate forms automatically from a JSON schema.
- Framework Agnostic: Easily integrate with any frontend framework.
- Customizable Components: Extend and customize form fields to suit your needs.
- Lightweight: Minimal dependencies and small bundle size.
To include Henso in your project, simply install it via npm:
npm install hensoAfter installing, you can start using Henso in your project. Below is a basic example of how to use the FormComponent:
import React from 'react';
import { FormComponent } from 'henso';
const schema = {
properties: {
name: {
title: "Name",
type: "string"
},
age: {
title: "Age",
type: "number"
}
}
};
const initialValues = {
name: '',
age: ''
};
const App = () => {
const handleSubmit = (values) => {
console.log("Form submitted:", values);
};
const handleChange = (values) => {
console.log("Form changed:", values);
};
return (
<FormComponent
formSchema={schema}
initialValues={initialValues}
onFormSubmit={handleSubmit}
onFormChange={handleChange}
/>
);
};
export default App;export const formSchema = {
title: "Bar Plot Customization",
type: "object",
options: {
inputAttributes: {
class: "w-full mt-1 rounded-lg p-2 h-12",
},
},
properties: {
"chart-title": {
type: "string",
title: "Chart Title",
options: {
inputAttributes: {
class: "mt-3 w-full p-2 border rounded-md text-sm",
},
containerAttributes: {
class: "mt-2 text-sm font-bold",
},
},
},
"chart-subtitle": {
type: "string",
title: "Chart Subtitle",
options: {
inputAttributes: {
class: "mt-3 w-full p-2 border rounded-md text-sm",
},
containerAttributes: {
class: "mt-2 text-sm font-bold",
},
},
},
"chart-xaxis-label": {
type: "string",
title: "X Axis Label",
options: {
inputAttributes: {
class: "mt-3 w-full p-2 border rounded-md text-sm",
},
containerAttributes: {
class: "mt-2 text-sm font-bold",
},
},
},
"chart-yaxis-label": {
type: "string",
title: "Y Axis Label",
options: {
inputAttributes: {
class: "mt-3 w-full p-2 border rounded-md text-sm",
},
containerAttributes: {
class: "mt-2 text-sm font-bold",
},
},
},
"chart-show-background": {
type: "boolean",
title: "Show Background",
format: "customBoolean",
options: {
inputAttributes: {
class: "w-full mt-3 p-2 border rounded-md",
},
containerAttributes: {
class: "mt-2 text-sm font-bold",
},
},
enum: [
{ value: 'show', label: 'Show' },
{ value: 'hide', label: 'Hide' },
],
},
dynamicForms: {
type: "array",
title: "Series",
items: {
type: "object",
properties: {
"series-title": {
type: "string",
title: "Series Title",
options: {
inputAttributes: {
class: "w-full h-12 bg-white text-blue-gray-700 outline outline-0 focus:outline-0 transition-all border focus:border-2 text-sm py-1 px-2 rounded-md border-blue-gray-200 focus:border-gray-300",
},
containerAttributes: {
class: "mt-2 text-sm text-gray-600 font-bold",
},
},
},
"series-column-category": {
type: "string",
title: "Column Category",
format: "tagify",
enum: [],
maxtags: 1,
options: {
inputAttributes: {
class: "w-full bg-white text-blue-gray-700 outline outline-0 focus:outline-0 transition-all border focus:border-2 text-sm px-3 py-2.5 rounded-md border-blue-gray-200 focus:border-gray-300",
},
containerAttributes: {
class: "mt-2 text-sm text-gray-600 font-bold",
},
},
},
"series-column-values": {
type: "string",
title: "Column Values",
enum: [],
format: "tagify",
maxtags: 1,
options: {
inputAttributes: {
class: "w-full bg-white text-blue-gray-700 outline outline-0 focus:outline-0 transition-all border focus:border-2 text-sm px-3 py-2.5 rounded-md border-blue-gray-200 focus:border-gray-300",
},
containerAttributes: {
class: "mt-2 text-sm text-gray-600 font-bold",
},
},
},
"series-aggregation": {
type: "string",
title: "Aggregation",
enum: ["Sum", "Mean", "Min", "Max"],
format: "tagify",
maxtags: 1,
options: {
inputAttributes: {
class: "w-full mt-3 bg-white text-blue-gray-700 outline outline-0 focus:outline-0 transition-all border focus:border-2 text-sm px-3 py-2.5 rounded-md border-blue-gray-200 focus:border-gray-300",
},
containerAttributes: {
class: "mt-2 text-sm text-gray-600 font-bold",
},
},
},
"series-colorspace": {
type: "string",
title: "Color Space",
format: "colorsDropdown",
enum: [
"Viridis", "YlGnBu", "Inferno", "Magma", "Plasma", "Warm", "Cool",
"CubehelixDefault", "BuGn", "BuPu", "GnBu", "OrRd", "PuBuGn", "PuBu",
"PuRd", "RdPu", "YlGn", "YlOrBr", "YlOrRd", "Turbo", "Cividis",
"Rainbow", "Sinebow", "Blues", "Greens", "Greys", "Purples", "Reds",
"Spectral", "RdYlGn", "RdYlBu", "RdGy", "RdBu", "PiYG", "PRGn", "PuOr", "BrBG",
],
options: {
inputAttributes: {
class: "w-full bg-white text-blue-gray-700 outline outline-0 focus:outline-0 transition-all border focus:border-2 text-sm px-3 py-2.5 rounded-md border-blue-gray-200 focus:border-gray-300",
},
containerAttributes: {
class: "mt-2 text-sm text-gray-600 font-bold",
},
},
},
"series-primary-color": {
type: "string",
format: "color",
title: "Primary Color",
options: {
inputAttributes: {
class: "w-full bg-white text-blue-gray-700 outline outline-0 focus:outline-0 transition-all border focus:border-2 text-sm px-3 py-2.5 rounded-md border-blue-gray-200 focus:border-gray-300",
},
containerAttributes: {
class: "mt-2 text-sm text-gray-600 font-bold",
},
},
},
"series-secondary-color": {
type: "string",
format: "color",
title: "Secondary Color",
options: {
inputAttributes: {
class: "w-full bg-white text-blue-gray-700 outline outline-0 focus:outline-0 transition-all border focus:border-2 text-sm px-3 py-2.5 rounded-md border-blue-gray-200 focus:border-gray-300",
},
containerAttributes: {
class: "mt-2 text-sm text-gray-600 font-bold",
},
},
},
},
},
},
},
};
export const initialValues = {
"chart-show-background": "hide",
dynamicForms: [
{
"series-title": "",
"series-column-category": "",
"series-column-values": "",
"series-aggregation": "",
"series-primary-color": "#ffffff",
"series-secondary-color": "#000000",
},
],
};
const App = () => {
const handleSubmit = (values) => {
console.log("Form submitted:", values);
};
const handleChange = (values) => {
console.log("Form changed:", values);
};
return (
<FormComponent
formSchema={formSchema}
initialValues={initialValues}
onFormSubmit={handleSubmit}
onFormChange={handleChange}
/>
);
};
export default App;Henso provides a set of customizable and flexible form fields that can be used to generate dynamic forms from a JSON schema. Below is a list of available fields and a brief description of each:
- DynamicForm (cb-dynamic-field.js)
- Description: A dynamic form component that allows for the creation and management of multiple form instances based on a JSON schema. It provides functionality to add or remove form sections and dynamically updates form titles and content based on user input.
- Usage: This field is particularly useful for scenarios where the user needs to input multiple entries of a similar type (e.g., multiple series of data points).
- CustomBooleanField (cb-field-boolean.js)
- Description: A custom boolean field component that renders a checkbox or toggle switch depending on the schema's configuration. It allows users to input true/false values in a user-friendly manner.
- Usage: Ideal for form inputs where a simple yes/no or true/false answer is required.
- ColorPickerField (cb-field-color.js)
- Description: A color picker component that allows users to select a color from a palette. The component supports both preset colors and a color picker tool for more precise selections.
- Usage: Useful for forms that require color selection, such as design settings or branding choices.
- SliderField (cb-field-slider.js)
- Description: A slider input component that lets users select a value from a range by sliding a handle along a track. The slider can be configured for different ranges, step values, and display options.
- Usage: Ideal for numeric inputs where users should select a value within a specific range, such as adjusting settings like volume or brightness.
- TagifyField (cb-field-tagify.js)
- Description: A tag input component that allows users to create and manage a list of tags. It supports autocomplete suggestions and is highly customizable.
- Usage: Perfect for inputs where users need to enter multiple items, such as keywords, skills, or categories.
- ColorsDropdownField (cb-field-tagify-colors.js)
- Description: A dropdown field component specialized for color selection. This component provides a dropdown menu with color options that users can choose from.
- Usage: Similar to ColorPickerField, but with a predefined set of colors presented in a dropdown format.
These components are designed to be easily integrated into your form schema, providing a robust and user-friendly experience for various input types. Each component is framework-agnostic, ensuring that you can use them in different environments without dependency issues.
To get started with development or testing, clone the repository and install the necessary dependencies:
npm install
npm startIf you need to build the project in development mode (with source maps), you can use:
npm run buildThis will generate a non-minimized build with source maps, useful for debugging.
To create a production build, which is optimized and minified, run:
npm run build:prodThe production build will be available in the dist folder.
Contributions are welcome! Please fork the repository, create a new branch, and submit a pull request with your changes. Make sure to run tests and lint your code before submitting.
This project is licensed under the MIT License - see the LICENSE file for details.
Thanks to all the contributors and the open-source community for their continuous support and improvement of this project.
We are www.cubode.com an startup focussed on No Code, AI and OpenSouce.
Templatifier has been developed with 💙 for the community