Rendering input controls

The editor renders input controls from the items array. The built-in controls ("text", "textarea", "checkbox", "section", and "readonly") need no setup. For other controls, import them and register them with registerEditorItem.

Render a color picker

Import ColorSelect from @svar-ui/svelte-core and register it with registerEditorItem:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import { ColorSelect } from "@svar-ui/svelte-core";
  
  registerEditorItem("colorselect", ColorSelect);

  const items = [
    {
      comp: "colorselect",
      key: "name",
      label: "Name"
    }
  ];
</script>

<Editor {items} />

The color picker lets users select a color through a graphical interface. It's ideal for use cases where users define a color, such as customizing themes or assigning colors to categories.

Render a date picker

Import DatePicker from @svar-ui/svelte-core and register it with registerEditorItem:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import { DatePicker } from "@svar-ui/svelte-core";
  
  registerEditorItem("datepicker", DatePicker);

  const items = [
    {
      comp: "datepicker",
      key: "name",
      label: "Name"
    }
  ];
</script>

<Editor {items} />

The date picker lets users select a date from a calendar interface. It's useful for scheduling, deadline setting, or any date-related input.

Render radio buttons

Import RadioButtonGroup from @svar-ui/svelte-core and register it with registerEditorItem:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import { RadioButtonGroup } from "@svar-ui/svelte-core";
  
  registerEditorItem("radio-group", RadioButtonGroup);

  const items = [
    {
      comp: "radio-group",
      key: "name",
      label: "Name",
      options: [
        {
          value: "s",
          label: "Scorpions",
        },
        {
          value: "m",
          label: "Muse",
        },
      ]
    }
  ];
</script>

<Editor {items} />

Radio buttons present multiple options where only one can be selected. This is suitable for selecting preferences or categories.

Render a read-only block

"readonly" is a built-in control that doesn't require registration:

<script>
  import { Editor } from "@svar-ui/svelte-editor";
  
  const items = [
    {
      comp: "readonly",
      key: "name",
      label: "Name"
    }
  ];
</script>

<Editor {items} />

The read-only block displays static information that users can't edit. It's useful for showing pre-defined or system-generated data.

Render a rich select

Import RichSelect from @svar-ui/svelte-core and register it with registerEditorItem:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import { RichSelect } from "@svar-ui/svelte-core";
  
  registerEditorItem("select", RichSelect);

  const items = [
    {
      comp: "select",
      key: "name",
      label: "Name",
      options: [
        { id: 1, label: "High", color: "#DF282F" },
        { id: 2, label: "Medium", color: "#FFC975" },
        { id: 3, label: "Low", color: "#65D3B3" },
      ]
    }
  ];
</script>

<Editor {items} />

The rich select lets users choose from a list of options with additional properties like colors or icons for better visualization. It's ideal for priority selection or categorization.

Render a slider

Import Slider from @svar-ui/svelte-core and register it with registerEditorItem:

<script>
  import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
  import { Slider } from "@svar-ui/svelte-core";
  
  registerEditorItem("slider", Slider);

  const items = [
    {
      comp: "slider",
      key: "name",
      label: "Name"
    }
  ];
</script>

<Editor {items} />

The slider lets users select a value within a predefined range. It's commonly used for settings like volume, brightness, or rating systems.

Render an editable text field

"text" is a built-in control that doesn't require registration:

<script>
  import { Editor } from "@svar-ui/svelte-editor";
  
  const items = [
    {
      comp: "text",
      key: "name",
      label: "Name"
    }
  ];
</script>

<Editor {items} />

The text control is a basic single-line input field. It's suitable for simple data entry like names, titles, or short descriptions.

Render a textarea

"textarea" is a built-in control that doesn't require registration:

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

  const items = [
    {
      comp: "textarea",
      key: "name",
      label: "Name"
    }
  ];
</script>

<Editor {items} />

The textarea provides a multi-line input field for longer text. It's ideal for comments, descriptions, or notes.

Add a comments widget

Import Comments from @svar-ui/svelte-comments and register it with registerEditorItem:

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

  registerEditorItem("comments", Comments);

  const users = [
    {
      id: 1,
      name: "John Doe",
      avatar: "https://via.placeholder.com/150",
    },
  ];

  const items = [
    {
      comp: "comments",
      key: "comments",
      label: "Comments",
      users,
      activeUser: 1,
    },
    
  ];

  const data = {
    comments: [
      {
        id: 1,
        user: 1,
        content: "Greetings, fellow colleagues.",
        date: new Date(),
      },
    ],
  }
</script>

<Editor {items} values={data} />

The comments widget lets users add, view, and manage comments within the editor. It's useful for collaborative workflows or feedback systems, with user identification and timestamps.

Related sample: Comments

Add a task list

Import TaskList from @svar-ui/svelte-tasklist and register it with registerEditorItem:

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

  registerEditorItem("tasks", TaskList);
  const items = [
    {
      comp: "tasks",
      key: "task",
      label: "Task",
    },
  ];

  const data = {
    task: [
      {
        id: 1,
        title: "Task 1",
        status: 1,
      },
    ],
  }
</script>

<Editor {items} values={data} />

The task list integrates task management into the editor. It's suitable for creating and tracking tasks with titles and status updates.

Related sample: Tasklist