🚀 Build Edit Forms in React Faster with SVAR Editor

#react #frontend #javascript #opensource

Building edit forms for structured data is repetitive work. User profiles, admin panels, product details - they all need similar functionality: validation, layouts, save logic, and consistent UI. While libraries like React Hook Form handle form state beautifully, you still need to build all the UI components yourself.

In addition to its SVAR React Core library, SVAR released an open-source form editor component which simplifies the creation of editing forms for any UI element with structured data – SVAR React Editor.

This is an example of how the form built with SVAR Editor may look like, with various form inputs and comments section:

Whether you're handling user profiles, info cards, or any dataset with predefined fields, you can use SVAR Editor as a constructor to integrate all the form controls from the Core library. The component is free under MIT license, supports TypeScript and works seamlessly with React 18 and 19.

Key Features

With SVAR React Editor, you can build custom edit forms faster as it has pre-built blocks and components to handle form creation:

All SVAR React Core components can be used as form inputs (buttons, text input, selects, datepicker, combobox, etc)
Choose how the form appears on a page: inline, popup, or sidebar
Built-in validation, with support for custom validation rules
Collapsible sections for large forms
Two-column layout for a compact UI
Flexible saving options: real-time updates or manual saving via a button click
Menu and toolbar integration for better UX
Comments and to-do list sections can be added
Light and dark themes

Get Started

Here are the useful links to learn more about SVAR React Editor and see it in action:

To get started with the Editor component, you can install it via npm (note that you also need to install SVAR Core library to get access to all the form controls):

npm install @svar-ui/react-core
npm install @svar-ui/react-editor

Here is how you create a simple editor form with three input fields:

import { Willow } from '@svar-ui/react-core';
import { Editor } from '@svar-ui/react-editor';

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "text", key: "descr", label: "Description" },
  { comp: "text", key: "role", label: "Role" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  role: "admin"
};

export default function App() {
  return (
    <Willow>
      <Editor items={items} values={values} />
    </Willow>
  );
}

Building edit forms is really easy with SVAR Editor. The component comes with comprehensive documentation covering all configuration options, detailed API references, and practical examples for common use cases.

Summing Up

SVAR Editor is best when you need a complete UI solution quickly. Unlike headless form libraries like React Hook Form or Formik, it comes with pre-built form controls, layouts, and themes, making it perfect for quickly implementing admin panels, profile editors, and data entry interfaces.

The component also works well with the SVAR React ecosystem, including DataGrid and Gantt components.

Give it a try and share your feedback on GitHub!