Skip to main content

Installation and initialization

Installation​

To install the Svelte Editor library, you should run the following command:

//npm
npm install @svar-ui/svelte-editor

//yarn
yarn add @svar-ui/svelte-editor
note

The package migrated from wx-svelte-editor to @svar-ui/svelte-editor. We continue publishing wx-svelte-editor until the Svelte SVAR 3.0 update

Initialization​

Editor provides flexible options for initialization. You can define input fields, prefill values, and set the widget to editable or read-only mode.

Initialize the editor widget​

The editor has five built-in controls: "text", "textarea", "checkbox", "section", and "readonly".

To use other controls, import them from the @svar-ui/svelte-core library. Then register them with the registerEditorItem helper.

Use the items array to define the form fields and the values object to set their initial data:

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   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: "Lorem ipsum dolor sit amet",
      admin: true,
      role: "admin"
   };
</script>

<Editor {items} {values} />

In this example, the items array defines the form structure, where each object specifies the input type (comp), a unique key (key), and a label (label). The values object provides initial values; each value maps to the field with the matching key. This setup is useful for creating a basic form with preloaded data, such as when editing an existing record.

Initialize the editor in read-only mode​

Set readonly to true to display the form data without allowing edits:

<script>
   import { Editor } from "@svar-ui/svelte-editor";

   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: "Lorem ipsum dolor sit amet",
      admin: true,
      role: "admin"
   };
</script>

<Editor {items} {values} readonly={true} />

In this example, readonly is set to true, which prevents users from modifying the input fields. This is ideal when you need to show form data without allowing edits, such as in a review or audit interface.

readonly

Initialize the editor with a theme​

This example shows the complete setup including the Willow theme wrapper:

<script>
  import { Editor, Willow } from "@svar-ui/svelte-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"
  };
</script>

<Willow>
  <Editor {items} {values} />
</Willow>
note

To ensure correct initialization, it's recommended to apply a theme at the top level of your application. If you use the Editor component standalone, do not forget to wrap it into a theme (Willow is applied in the example above).

Visual themes​

The editor ships with two visual themes from @svar-ui/svelte-core. Wrap the Editor in Willow for light mode or WillowDark for dark mode:

<script>
import { Willow, WillowDark } from "@svar-ui/svelte-core";
</script>

<!-- Light -->
<Willow>
  <Editor />
</Willow>

<!-- Dark -->
<WillowDark>
  <Editor />
</WillowDark>