Lets Form

screenshot of Lets Form
react
scss
ant-design
material-ui

A JSON form generator for React with Material UI / AntDesign / Bootstrap / RSuite / Mantine

Overview:

LetsForm is an open-source tool designed for generating React forms easily through simple JSON schemas. It utilizes various native UI components such as Material UI, AntD, RSuite, ReactBootstrap, Mantine, and React to streamline the form-building process. With LetsForm, developers can eschew repetitive boilerplate tasks and design forms visually with the help of the LetsForm designer. Based on the performant React Hook Form, LetsForm ensures visual consistency across different forms and provides support for features like validation, multi-language (i18n) support, and dynamic form creation using JavaScript.

Features:

  • Easy Form Generation: Create React forms using simple JSON schemas.
  • Visual Form Design: Design forms visually with the LetsForm designer.
  • Consistent UI Components: Utilize over 30 components for consistent behavior and properties.
  • Built-in Validation: Validation support with i18n and scripting capabilities.
  • Multi-language Support: Automatic translations of i18n tokens for multi-language forms.
  • Dynamic Forms: Implement dynamic forms using JavaScript with a straightforward set of instructions.
  • Form Modes: Easily switch between editable, disabled, read-only, and plaintext form modes.
  • Array Support: Define fields for arrays and seamlessly manage array items within the form.
  • Form Templates: Access ready-to-use form templates like cascading dropdowns and credit card validation.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

ant-design
Ant Design

Ant Design is a React UI library that provides a set of pre-designed components and design resources for building high-quality, responsive web applications.

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.