Lightweight Svelte Gantt Chart
SVAR Svelte Gantt is an open-source, customizable Gantt chart component written in Svelte. Build custom project timelines and task flow visualizations in minutes!
Also available for:
SVAR Svelte Gantt is an open-source, customizable Gantt chart component written in Svelte. Build custom project timelines and task flow visualizations in minutes!
With Svelte at its core, SVAR Gantt chart lets you quickly build a modern, interactive project visualization UI 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!
SVAR 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.
Maintain high-quality performance due to an optimized rendering engine and dynamic loading. This Svelte Gantt chart ensures incredibly fast loading speed even with big data - see the demo with 10k tasks.
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.
Our Svelte Gantt chart comes with drag and drop support, proving the interactivity users are used to in modern apps. Users can reorder tasks in the grid, move and resize task bars on the chart, and drag task progress on a task bar.
With well-crafted documentation, comprehensive API references, multiple demos, and full TypeScript support, you can quickly add our Svelte Gantt chart to your web application.
Explore SVAR Svelte Gantt: move and resize taskbars, double-click a taskbar to call the editing form, reorder the items in the grid on the left, or use the toolbar to manage the tasks. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!
SVAR Svelte Editor can be easily integrated into the Gantt chart, giving end users the ability to add and edit tasks via an intuitive form. You can customize the form to suit your project's needs: define custom fields, add validation rules, choose modal or sidebar display, and adjust saving behavior.
SVAR Gantt supports 3 task types (tasks, summary tasks and milestones) and displays task dependencies, such as predecessor-successor relationships, to accurately represent project timelines. You can also create hierarchical project structures with subtasks for complex project visualization.
Give your users a way to effortlessly manage tasks with the intuitive toolbar: add, delete, rearrange, and edit tasks with ease using toolbar buttons, or add your custom operations. You can also enable a context menu that helps users easily control the project's timeline and structure.
The localization feature allows you to present the interface of the Gantt chart in the language you'd like. You can provide custom translations for actions (edit, delete), button labels, confirmation messages, task edit form fields and context menu items.
SVAR Svelte Gantt offers a beautifully-designed user interface with both light and dark themes. Users benefit from interactive tooltips with additional info for each task, zooming feature, and keyboard shortcuts for quick navigation. A highly flexible task grid supports multi-column task sorting, in-cell task editing, custom HTML content, and a header menu that allows users to show or hide grid columns.
npm install wx-svelte-gantt 
