Just released

Edit Form Component for React

SVAR Editor is an open-source React component that lets you quickly add intuitive edit forms to any UI element on a webpage. Build sidebar, popup or inline edit forms with ease.

Licensed under MIT

Also available for:

Customizable React Form to Edit Your Data

Need edit forms for data input and updates? Connect SVAR React Editor to a single or multiple data records, choose the required input fields, and sync changes with your backend. It offers multiple form controls, collapsible or tabbed sections, built-in validation, and full TypeScript support.

Try Live Demo

Click on any info card below to open its corresponding editor form. Edit the details to click how SVAR React Editor works in real time. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Key Features of SVAR React Editor

Multiple form controls

Build edit forms using a wide range of inputs: text fields, selects, checkboxes, radio buttons, date pickers, sliders, etc. Use SVAR Editor to modify data table entries, information cards, or any other data records.

Popup, sidebar or inline

Enhance user experience with versatile display modes - choose between a popup modal for focused editing, a smooth sidebar integration or inline form for seamless workflow.

Localization

Localization feature allows you to easily adapt Editor's interface to different regions by displaying labels, messages, and tooltips in your users' language.

Built-in validation

SVAR React Editor includes built-in form validation capabilities, covering required fields, numeric and text input validation. You can also add custom rules to match your app's logic.

Custom save logic

Control how changes are saved in the form. Configure SVAR React Editor to save edits on button click, implement auto-save on input, or design your own custom saving logic.

Flexible layout

Structure your forms with collapsible sections, organize grouped fields into tabs, or use a space-efficient two-column layout to maximize usability and screen space.
Star on GitHub

Get Help at Every Step

Resources