Skip to main content

Quick Start

Get a Gantt chart running in your Svelte app in minutes.

Installation

Install for Svelte 5 or Svelte 4, with npm, yarn, or pnpm.

API Reference

Full reference for all components, props, and the IApi object.

PRO Features

Auto-scheduling, critical path, export, undo/redo, and more.

​
What is SVAR Svelte Gantt?

SVAR Svelte Gantt is a production-ready Gantt chart component for Svelte 5 (and Svelte 4). It provides everything you need to build interactive project timeline views — from simple task lists to complex project management UIs with dependencies, hierarchical tasks, and server-side data synchronization. 
<script>
  import { Gantt, Willow } from "@svar-ui/svelte-gantt";

  const tasks = [
    {
      id: 1,
      start: new Date(2024, 3, 2),
      end: new Date(2024, 3, 17),
      text: "Project planning",
      progress: 30,
      parent: 0,
      type: "summary",
      open: true,
    },
    {
      id: 2,
      start: new Date(2024, 3, 2),
      end: new Date(2024, 3, 8),
      text: "Research",
      progress: 60,
      parent: 1,
    },
    {
      id: 3,
      start: new Date(2024, 3, 9),
      end: new Date(2024, 3, 17),
      text: "Design",
      progress: 10,
      parent: 1,
    },
  ];

  const links = [{ id: 1, source: 2, target: 3, type: "e2s" }];
  const scales = [
    { unit: "month", step: 1, format: "%F %Y" },
    { unit: "day", step: 1, format: "%j" },
  ];
</script>

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

​
Key features

Drag-and-drop

Move, resize, and reorder tasks directly on the timeline or in the grid.

Task dependencies

Create and visualize finish-to-start, start-to-start, and other link types.

Hierarchical tasks

Summary tasks with collapsible subtrees and automatic date calculations.

Configurable scales

Multi-row time scales with custom formats, zoom, and custom scale units.

Built-in editor

Customizable task edit form with validation, custom controls, and sidebar/modal modes.

Filtering & sorting

Column sorting, programmatic filtering, inline header filters, and natural language search.

Themes

Material, Willow (light), and WillowDark themes included. Fully customizable via CSS.

TypeScript

Full TypeScript definitions for all components, props, and the API.

​
Open source and PRO editions

SVAR Svelte Gantt is available under the MIT license. A PRO edition adds advanced features for enterprise project management:
  • Auto-scheduling with forward mode and Finish-to-Start dependencies
  • Critical path calculation and slack visualization
  • Work calendar with configurable working hours
  • Export to PDF, PNG, Excel, and MS Project
  • Undo/redo support
  • Baselines, rollups, split tasks, vertical markers, and unscheduled tasks

View PRO features

Explore what’s available in the PRO edition — including free trial information.

​
Svelte 4 and Svelte 5

VersionSveltePackage
2.x (current)Svelte 5@svar-ui/svelte-gantt
1.xSvelte 4wx-svelte-gantt@1.2.0
This documentation covers the 2.x (Svelte 5) version. If you are on Svelte 4, install wx-svelte-gantt@1.2.0 and refer to the migration guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us