Skip to main content
The 2.x release of SVAR Svelte Gantt was rewritten for Svelte 5 and published under a new package name. This guide covers every breaking change introduced between the 1.x (Svelte 4) line and the current 2.x (Svelte 5) line, so you can migrate with confidence.

​
Package rename

The package was renamed from wx-svelte-gantt to @svar-ui/svelte-gantt. All imports must be updated to use the new name. 
npm install wx-svelte-gantt

<script>
  import { Gantt } from "wx-svelte-gantt";
</script>

​
Migration steps

1

Upgrade to Svelte 5

Ensure your project is running Svelte 5 before installing the new package. The 2.x line does not support Svelte 4.
2

Replace the package

Uninstall the old package and install the new one.
npm uninstall wx-svelte-gantt
npm install @svar-ui/svelte-gantt
3

Update all imports

Replace every occurrence of wx-svelte-gantt with @svar-ui/svelte-gantt in your source files.
4

Replace the built-in editor

The default sidebar editor and the editorShape property were removed in 2.2.0. Use the standalone <Editor> component instead.See the editor migration section below.
5

Update table action column id

If you reference the action column by id, change "action" to "add-task". See below.
6

Update scale format strings

Scales format strings changed from date-fns syntax to SVAR locale syntax in 2.4.0. See below.
7

Update fullscreen helper import

The fullscreen helper moved to @svar-ui/svelte-core in 2.4.0. See below.
8

Remove expand-scale action usage

The "expand-scale" action was removed in 2.6.0. Remove any code that dispatches or handles it. See below.

​
Breaking changes

​
Editor / editorShape removed (2.2.0)

The built-in sidebar editor and the editorShape prop on <Gantt> were removed. You now mount the standalone <Editor> component yourself and pass it an api reference from the Gantt. 
<script>
  import { Gantt } from "wx-svelte-gantt";

  const editorShape = [
    { type: "text", key: "text", label: "Task name" },
    { type: "date", key: "start", label: "Start date" },
    { type: "date", key: "end", label: "End date" },
  ];
</script>

<Gantt {tasks} {links} {scales} {editorShape} />

​
Table action column id changed (2.2.0)

The id of the built-in action column was renamed from "action" to "add-task". Update any column configuration or event handlers that reference this id. 
const columns = [
  { id: "text", header: "Task", flexgrow: 1 },
  { id: "action" }, // built-in action column
];

​
Scales format string changed (2.4.0)

This change silently produces incorrect scale labels if you forget to update your format strings. Double-check every format value in your scales array after migrating.
Scale format strings changed from date-fns token syntax to SVAR locale format syntax. The two syntaxes use different tokens for the same date parts. Common token equivalents:
date-fns (before)SVAR locale (after)Output example
MMMM yyyy%F %YJanuary 2024
MMM%MJan
d%j7
EEE%DMon
HH:mm%H:%i09:30
const scales = [
  { unit: "month", step: 1, format: "MMMM yyyy" },
  { unit: "day",   step: 1, format: "d" },
];

​
Fullscreen helper moved (2.4.0)

The fullscreen utility function moved from @svar-ui/svelte-gantt to @svar-ui/svelte-core. Update the import path. 
import { Fullscreen } from "@svar-ui/svelte-gantt";
Install @svar-ui/svelte-core if it is not already a direct dependency of your project: 
npm install @svar-ui/svelte-core

​
expand-scale action removed (2.6.0)

The "expand-scale" API action was removed. If you were dispatching this action programmatically, remove those calls. Use the "resize-chart" action or the resizer UI instead to manage scale dimensions. 
api.exec("expand-scale", { ... });

Build docs developers (and LLMs) love

Get started for freeTalk to us