Skip to main content
The Editor component renders a slide-in panel that lets users view and edit task properties. It opens when api.exec("show-editor", { id }) is called and closes when the user saves or cancels.

​
Import

import { Editor } from "@svar-ui/svelte-gantt";

​
Basic usage

<script>
  import { Gantt, Editor } from "@svar-ui/svelte-gantt";
  import { getData } from "./data";

  const data = getData();
  let api = $state();

  function init(ganttApi) {
    api = ganttApi;
    // Open the editor automatically when a new task is added
    api.on("add-task", ({ id }) => {
      api.exec("show-editor", { id });
    });
  }
</script>

<Gantt {init} tasks={data.tasks} links={data.links} scales={data.scales} />
<Editor {api} />

​
Props

​
api
IApi
required
The Gantt API object. Obtain it by binding this on the Gantt component or via the init callback. The editor uses this reference to read the task being edited and persist changes.
<script>
  let api = $state();
</script>

<Gantt bind:this={api} tasks={[]} scales={[]} />
<Editor {api} />
​
items
TEditorItem[]
Array of editor field definitions that override the default form layout. When omitted, the default set of fields is used.
type TEditorItem =
  | TTextFieldShape
  | TCounterShape
  | TComboFieldShape
  | TSliderShape
  | TDateFieldShape
  | TRadioShape
  | ILinksShape
  | ITwoStateShape
  | TCheckboxShape;
Every editor item shares a common base shape:
type TCommonShape = {
  id?: TID;
  key: string;      // task property key to bind
  label?: string;
  labelTemplate?: (value: any) => string;
  config?: Record<string, any>;
  isHidden?:   (task: Partial<ITask>) => boolean;
  isDisabled?: (task: Partial<ITask>, state: IData) => boolean;
  [key: string]: any;
};

​
Editor field types

Each item in items must include a comp field that selects the field component.
Renders a single-line text input or multi-line textarea.
type TTextFieldShape = TCommonShape & {
  comp: "text" | "textarea";
};

{ key: "text",    comp: "text",     label: "Name",        config: { placeholder: "Task name" } }
{ key: "details", comp: "textarea", label: "Description", config: { placeholder: "Add description" } }
Renders a date picker. Set time: true to include a time selector.
type TDateFieldShape = TCommonShape & {
  comp: "date";
  time?: boolean;
};

{ key: "start", comp: "date", label: "Start date", config: { format: "%d-%m-%Y" } }
{ key: "end",   comp: "date", label: "End date",   config: { format: "%d-%m-%Y" } }
Renders a numeric stepper.
type TCounterShape = TCommonShape & {
  comp: "counter";
};

{ key: "duration", comp: "counter", label: "Duration", config: { min: 1 } }
Renders a range slider, typically used for progress.
type TSliderShape = TCommonShape & {
  comp: "slider";
};

{ key: "progress", comp: "slider", label: "Progress", config: { min: 0, max: 100 } }
Renders a dropdown selector.
type TComboFieldShape = TCommonShape & {
  comp: "combo" | "select" | "multiselect";
  options?: { id: any; label: string }[];
};

{
  key: "type",
  comp: "select",
  label: "Type",
  options: [
    { id: "task",      label: "Task" },
    { id: "milestone", label: "Milestone" },
    { id: "summary",   label: "Summary" },
  ],
}
Renders a group of radio buttons.
type TRadioShape = TCommonShape & {
  comp: "radio";
  options: { id: TID; label: string }[];
};
Renders a boolean checkbox.
type TCheckboxShape = TCommonShape & {
  comp: "checkbox";
};

​
Default editor fields

When no items prop is provided, the editor renders these fields:
KeyComponentLabelHidden when
texttextName—
detailstextareaDescription—
typeselectTypeTask is a segment
startdateStart dateTask is a summary
enddateEnd dateTask is a summary or milestone
durationcounterDurationTask is a summary or milestone
progresssliderProgressTask is a milestone or segment
linkslinks—Task is a segment

​
Custom editor fields

Use getEditorItems to start from the defaults and extend them: 
<script>
  import { Gantt, Editor } from "@svar-ui/svelte-gantt";
  import { getEditorItems } from "@svar-ui/svelte-gantt";

  let api = $state();

  const items = [
    ...getEditorItems(),
    { key: "priority", comp: "select", label: "Priority",
      options: [
        { id: "low",    label: "Low" },
        { id: "medium", label: "Medium" },
        { id: "high",   label: "High" },
      ] },
  ];
</script>

<Gantt bind:this={api} tasks={[]} scales={[]} />
<Editor {api} {items} />
Register fully custom field components with registerEditorItem from @svar-ui/svelte-gantt.

Build docs developers (and LLMs) love

Get started for freeTalk to us