Customizable
Svelte Editor Form

An easy-to-use Svelte component that allows you to create content editing forms for managing data stored within a UI element on a page.

Also available for:

previewpreview

Use SVAR Svelte Editor to enable users to input and edit data in a lightweight and customizable form. Link it to one or multiple data records on a page and easily save changes to the backend.
Free under the MIT license.

Key Features of SVAR Svelte Editor

Easy way for content editing

SVAR Editor can be connected to any UI element or block on a page, enabling easy editing of its content. Use it to edit data table records, informational cards, or other interactive components through an intuitive form.

Modal popup or sidebar

For quick and convenient access to editing functionality, the editor form can be displayed in a popup modal box or seamlessly appear as a side bar.

Different input fields

Customize the editor form by adding different input fields, including text inputs, select boxes, checkboxes, radio buttons, date pickers, slider, and more. All form controls of SVAR Core, our Svelte component library, can be easily used within SVAR Editor.

Basic validation

SVAR Svelte Editor offers essential form validation features, including required fields, numeric and text input validation, as well as the ability to define custom validation rules tailored to your specific needs.

Save options

The editor offers flexible options for saving changes in the form. You can configure it to save the form when the Save button is clicked, automatically save data when it's edited, or implement any other custom saving logic.

Compact layout

You can organize form parts into expandable sections or use a space-saving 2-column layout. Maximize screen efficiency without compromising user experience.

SVAR Svelte Editor Live Demo

Click on any info card below to open its editor form. Feel free to edit the details and see how SVAR Svelte Editor works in real-time.

SVAR Svelte Editor Demo Preview

This demo isn't playing nice with small screens. For the best view, try opening it on a desktop or larger device.