✏️ SVAR Editor: A Smarter Way to Handle Editing Forms in Svelte

Building dashboards, task managers, or interactive web apps? If you're a Svelte developer working with structured data that needs editing - like task cards, table rows, or info panels - you know creating a seamless editing experience can be quite challenging. That's why we created SVAR Svelte Editor.

Every time you need an editable element on a page, this component helps you create an editing form, link it directly to your data objects and provide a smooth, user-friendly edit experience.

Display Options

You can use SVAR Editor as a structured form built-in on a page, in a popup window, or in a sidebar panel to handle edits in an intuitive way. Give your users the power to modify data on the fly.

Multiple Form Controls

The editor component is powered by form controls of SVAR Svelte Core library that can be combined in a single form. The list of supported controls includes text input, select box, combobox, checkbox, radio button, date picker, comments section, and more.

Customization Options

By default, SVAR Editor comes with two ready-to-use, sleek skins: light and dark. All the form controls are easily customizable through CSS and Svelte API, so you can adjust the look and feel of your forms to your app needs.

Localization support allows you to display labels, messages, and tooltips in different languages. Also, basic form validation is built-in, allowing you to add required fields and set up your custom validation logic.

Saving Form Data

When it comes to saving form data, SVAR Editor gives you the flexibility to choose the approach that best suits your needs. You can either configure the Editor to update the data source in real-time as the user edits, or save changes only when a specific event (like clicking a save button) is triggered.

Getting Started

You can install Svelte Editor via npm, together with SVAR Core library:

npm install wx-svelte-core
npm install wx-svelte-editor

Here is the example of a simple form with several input fields and corresponding values:

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Checkbox, TextArea } from "wx-svelte-core";

    registerEditorItem("checkbox", Checkbox);
    registerEditorItem("textarea", TextArea);

    const items = [
        { comp: "text", key: "name", label: "Name" },
        {
            comp: "textarea",
            key: "descr",
            label: "Description"
        },
        { comp: "checkbox", key: "admin", label: "Is Admin" }
    ];

    const values = {
        name: "John Doe",
        descr: "Senior developer",
        admin: true,
        role: "admin"
    };
</script>

<Editor {items} {values} />

For further instructions, visit the getting started guide.

Summing Up

Whether you're building a complex dashboard or a simple profile page, SVAR Editor can be a handy tool that speeds up the development process. Forget manually managing form states and validation. SVAR Svelte Editor takes care of inline editing logic, so you can focus on building great UIs.

SVAR Svelte Editor is open-source under the MIT license. Check it out on GitHub and give it a ⭐ if you find it useful!