Quick start

Get a working editor form on the page in a couple of minutes. Install the package, wrap it in a theme, hand it a field list and some data, then read the edits back.

Install the package

Install the editor package:

npm install @svar-ui/react-editor

yarn add @svar-ui/react-editor

bun add @svar-ui/react-editor

The editor re-exports its theme from @svar-ui/react-core, which comes along as a dependency - you don't need to install it separately.

Wrap with a theme

Import Editor and wrap it in Willow to apply the default styles:

import { Editor, Willow } from "@svar-ui/react-editor";

function App() {
  return (
    <Willow>
      <Editor />
    </Willow>
  );
}

Willow injects the CSS variables the editor styles itself with. Without it, the form renders unstyled. Mount it once near your app root, and use WillowDark instead for dark mode.

Define items and values

Pass an items array of field definitions and a values object with the initial data:

import { Editor, Willow } 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: "Team lead on the platform group",
  role: "admin"
};

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

Each item's comp picks the control type, key links it to the matching entry in values, and label sets the display text. That's the full minimum: a rendered form bound to your data.

Receive edits

The editor works on a draft copy of values, so your original data stays untouched until a save. Handle onSave to read the edited record back:

import { Editor, Willow } from "@svar-ui/react-editor";

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

const values = { name: "John Doe", role: "admin" };

function App() {
  const save = ({ values, changes }) => {
    // values - the edited record; changes - the keys that changed
    console.log(changes, values);
  };

  return (
    <Willow>
      <Editor items={items} values={values} autoSave onSave={save} />
    </Willow>
  );
}

With autoSave, each validated change fires onSave right away. Drop it, and edits stay pending until a save action runs from the toolbar. The handler gets values (the updated record) and changes (the list of keys the user touched).

Next steps

• Key features - what the editor can do: display modes, input controls, form organization, toolbar, validation, themes, and localization.
• Fields - the items array in depth: value binding, per-item options, read-only fields.
• Data handling - auto-save vs. manual save, change detection, validation.
• API reference - every prop, event, and helper exported by the package.