Skip to main content

Getting started

First steps​

To start with the widget, add the necessary packages to the project.

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

or

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

Import the widget into the project.

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

<Willow>
  <Editor />
</Willow>

The Willow component acts as a default theme wrapper that adds necessary styles for all SVAR widgets. The Editor component can function without it, but it will lack styles, requiring manual style addition. It is recommended to include the Willow tag at the top level of the application.

Full init code​

To see the widget in action, add some items to the widget.

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

Related articles: