SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 
Latest update: v2.8

Svelte Gantt Chart

Lightweight task scheduling

SVAR Svelte Gantt is an open-source, customizable Gantt chart component written in Svelte 5. Build custom project timelines and task flow visualizations in minutes!

Also available for:
Also available for:

Why Choose SVAR Svelte Gantt?

Built with Svelte

With Svelte at its core, SVAR Gantt chart lets you quickly build a modern, interactive UI for project visualization with minimal effort. As a client-side Svelte solution, it can be used with any JavaScript-based stack and with any backend. It's also Svelte 5 ready! 
<script>
  import { Gantt, Willow } from "@svar-ui/svelte-gantt";


  const tasks = [
    { id: 1, text: "Project planning",  type: "summary", open: true },
    { id: 2, text: "Marketing analysis", start: new Date(2026, 3, 2), duration: 3,  parent: 1 },
    { id: 3, text: "Discussions", start: new Date(2026, 3, 5), duration: 2,  parent: 1 }
  ];


  const links = [
    { id: 1, source: 2, target: 3, type: "e2s" }
  ];
</script>


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

Fully customizable

SVAR Svelte Gantt offers a rich, intuitive API and flexible CSS styling. Use these features to adjust the look and feel of the Gantt chart: time scale, task bars, task grid columns, task edit form, and more. Beautifully-designed light and dark themes are included.
SVAR picture

Blazing fast with large datasets

Maintain high-quality performance due to an optimized rendering engine and dynamic loading. Our Svelte Gantt chart ensures extremely fast loading and smooth rendering even with a large number of tasks - see the demo handling 10,000 tasks.

rocket

Interactive drag-and-drop interface

Drag and drop support allows users to reorder tasks in the grid, move and resize task bars on the chart, add dependencies and adjust task progress on a task bar. Double-click on any task opens a customizable form to edit task details. Sorting and filtering help users quickly find tasks they need.
SVAR picture

Backend-friendly integration

SVAR Svelte Gantt works with any backend through the RestDataProvider service. It automatically handles all CRUD operations for tasks and links with debouncing, and supports batch processing for performance optimization.
##

Open-Source & PRO Editions

SVAR Svelte Gantt is available in a free open-source version and a PRO edition with advanced scheduling, resource planning, and automation capabilities.

If your project requires features like auto-scheduling, critical path, working-time calendars, resource load chart, or export functionality, the PRO edition gives you the extra flexibility.

Learn About PRO
##
Star on GitHub

Works with:

Claude Code Claude Code
Cursor Cursor
Codex CLI Codex CLI
Antigravity Antigravity
ChatGPT ChatGPT
GitHub Copilot GitHub Copilot

Ready for AI-Assisted Development

SVAR offers an AI integration kit — an MCP server, skills, and context packs — to help your coding agent write correct SVAR Svelte Gantt code on the first try.

AI Tools for Svelte Gantt Connect the MCP server

Try the Live Demo

Explore SVAR Svelte Gantt: drag and drop tasks, double-click a taskbar to open the editor, use the toolbar or context menu. Try PRO features like split tasks, critical path, auto-scheduling, non-linear calendar. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

SVAR Svelte Gantt PRO for Advanced Scheduling

Build project planning directly into your Svelte application. SVAR Svelte Gantt PRO adds advanced scheduling logic, resource planning, progress tracking, and data export.

Pricing & Details Get Trial

pro

Svelte Gantt automatic scheduling

Schedule tasks automatically

A powerful scheduling engine lets users move one task while the rest of the schedule follows. Auto-scheduling recalculates dates and slack across FS, SS, FF, and SF dependencies. The critical path marks the chain of tasks that drives the project deadline.

pro

Svelte Gantt chart with task constraints and deadlines

Set constraints & deadlines

Set six types of constraints around delivery dates and contract milestones. When the plan becomes impossible, the conflict list explains what went wrong and suggests a fix. Deadline flags warn you when tasks run late.

pro

Svelte Gantt resource loading and scheduling

Plan resources & workload

Resource load and histogram views make over-allocation visible across the project, so teams can rebalance work earlier. Resource-driven scheduling shows when assigned people can actually complete the work.

pro

Svelte Gantt with working-time calendars

Schedule tasks around working time

The PRO Edition calculates schedules around working-time calendars and displays them on a non-linear time scale. Use project, task, and resource calendars to account for weekends, holidays, days off, and part-time schedules.

pro

Svelte Gantt chart export PDF, Excel and MS Project

Export & import Gantt data

Export tasks, resources, and assignments to PDF, PNG, Excel, or MS Project. Import existing MS Project files when you need to bring an established plan into a Svelte application or share the result with other project tools.

pro

Svelte Gantt progress tracking and baselines

Track progress & baselines

Capture a baseline before work begins and compare it with actual dates as the project changes. Use the progress line for a quick status check on any date, or read planned, actual, and baseline progress together in an S-curve.

Interactive SVAR Svelte Gantt chart for project management

A complete Gantt chart for Svelte

Go beyond basic timelines. PRO adds the features enterprise projects actually need: split tasks, rollups, task grouping, WBS codes, a sub-grid panel and undo/redo, with performance that stays smooth even on complex projects with thousands of linked tasks.

Compare Open-Source vs PRO

Get Gantt PRO Trial

Get full access to SVAR Svelte Gantt PRO for 30 days. We'll email you installation instructions right after you submit the form.

  • Fully functional trial
  • 30-day trial period
  • SVAR watermark

Read the full Trial License Agreement

Latest Updates

Version 2.8

October 7, 2026

What's new

Auto-scheduling: FS, SS, FF, SF (PRO)

Constraints & deadlines (PRO)

Resource-driven scheduling (PRO)

Real-time updates

Read More

Version 2.7

June 4, 2026

What's new

Resource planning (PRO)

Task grouping (PRO)

Individual calendars (PRO)

Import from Excel/CSV

Read More

Version 2.6

March 18, 2026

What's new

Filtering API

Integration with SVAR Filter

Rollups (PRO)

Slack visualization (PRO)

Read More

More about SVAR Svelte Gantt

Read our blog
How To
14 min read

A Step-by-Step Guide to Building a Svelte Gantt Chart with SVAR

Marina Chernyuk

Marina Chernyuk
How To
11 min read

8 Ways to Customize SVAR Svelte Gantt for Your Project

Marina Chernyuk

Marina Chernyuk
How To
9 min read

Creating a Halloween-Themed Svelte Gantt Chart with SVAR Gantt

Olga Tashlikovich

Olga Tashlikovich
Guide
7 min read

Benefits of Using SVAR Svelte Gantt in Your Project Management App

Olga Tashlikovich

Olga Tashlikovich

Need help with integration?

We offer paid consulting and custom development services to help you get the most from SVAR Svelte Gantt, from setup and customization to full web app development.

Contact Us

Frequently Asked Questions

A customizable, reusable Svelte component that provides an interactive Gantt chart for managing tasks, timelines, and dependencies. Key features include drag-and-drop task management, task dependencies, customizable edit form, tooltips, task sorting, filtering, flexible time scales, and CSS styling options. The component is compatible with Svelte 5 and comes with free, open-source core and PRO edition that supports advanced scheduling capabilities such as critical path analysis, baselines, working time calendars, auto-scheduling, constraints and deadlines, resource planning, progress tracking, data export, and more.
SVAR Svelte Gantt is available under two licensing models:
  • Open-Source Edition - Includes the core functionality and is licensed under MIT.
  • PRO Edition - Includes additional PRO features and is distributed under commercial licenses.
See pricing and details →
The open-source edition of SVAR Svelte Gantt provides the core Gantt chart with task management, dependencies (visualization and editing), drag-and-drop scheduling, customizable time scale, and real-time updates from the server. PRO extends the open-source edition with advanced project planning and tracking capabilities including:
  • Auto-scheduling across all four dependency types (FS, SS, FF, SF)
  • Critical path and slack visualization
  • Constraints and deadlines
  • Working time calendars
  • Progress line and S-curve
  • Resource planning: load chart, histogram, drag-and-drop assignment
  • Export to Excel, PDF, PNG, and MS Project
  • Split tasks, and more.
Read the full comparison or see the features marked with PRO tag in docs and demos.
Getting started is straightforward:
  • Install the open-source version: npm install @svar-ui/svelte-gantt
  • Import into your Svelte project
  • Initialize Gantt with its main properties
  • Load data
  • Configure and customize the Gantt chart to your needs.
SVAR Svelte Gantt is highly customizable, you can adjust the look of task bars, timeline settings, tooltips, task grid layout, and (optionally) a task edit form. Here are some helpful resources: Want to try SVAR Svelte Gantt PRO? Fill in this form for a free 30-day trial.
Yes, SVAR Svelte Gantt includes full TypeScript definitions (available since v2.3).
Yes, we provide a complete Go backend example on GitHub, plus RestDataProvider utility for handling task loading, updates, and synchronization workflows, including batch operations.
It's a Svelte-native Gantt chart component designed for both speed and easy customization. Thanks to its 100% Svelte code, it's highly responsive, easy to customize, and integrates naturally with Svelte 5 apps. It's also optimized to render large datasets with smooth performance. SVAR Svelte Gantt provides advanced features required for modern apps: rich customization options, easy styling with CSS, and drag-and-drop support for adjusting start dates, durations, and dependencies directly on the chart. With the PRO Edition, you get enterprise-grade features for complex scheduling tasks.
SVAR Svelte Gantt is the only actively maintained, Svelte-native Gantt component (no framework wrappers). It's open-source, feature-rich, optimized for large datasets, and specifically designed for project management, task tracking, and scheduling applications in Svelte. For React projects, we also offer SVAR React Gantt with similar capabilities.

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github