Skip to main content

Getting started

This page describes how to start with the SVAR Svelte Editor component in your Svelte application.

Step 1. Install the packages​

Install the editor package and the core UI library that provides the theme:

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

Or with yarn:

yarn add @svar-ui/svelte-core
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.

Step 2. Initialize the editor​

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

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

<Willow>
  <Editor />
</Willow>

Willow adds the necessary styles for all SVAR widgets. Apply it at the top level of your application. Without it, the Editor has no styles and you'll need to add them manually.

Step 3. Add form fields​

To display an actual form, pass items array (field definitions) and values object (initial data) to the editor:

<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>

Each item in items defines a field: comp sets the control type, key links it to the matching value in values, and label sets the display text.

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 (the Willow theme is applied in the example above).

What's next​

You now have a working editor with form fields. From here you can configure display modes, add validation, customize the toolbar, or switch to a dark theme.