Skip to main content

​
Prerequisites

SVAR Svelte Gantt 2.x requires Svelte 5. If you are on Svelte 4, see the Svelte 4 note below.

​
Install the package

npm install @svar-ui/svelte-gantt

​
Svelte 4

There are two published versions of SVAR Svelte Gantt:
VersionTargetPackage
2.x (current)Svelte 5@svar-ui/svelte-gantt
1.xSvelte 4[email protected]
To use the Svelte 4 version: 
npm install [email protected]
This documentation covers 2.x (Svelte 5). If you are on Svelte 4, use [email protected].

​
What is included

The package exports the following components and utilities:
ExportTypeDescription
GanttComponentThe main Gantt chart component
ToolbarComponentOptional toolbar with built-in actions
EditorComponentTask edit form
ContextMenuComponentRight-click context menu
TooltipComponentCustom tooltip wrapper
HeaderMenuComponentGrid column header menu
WillowThemeDefault light theme wrapper
MaterialThemeMaterial design theme wrapper
WillowDarkThemeDark theme wrapper
versionstringCurrent package version string
defaultEditorItemsArrayDefault editor field configuration
defaultToolbarButtonsArrayDefault toolbar button configuration
defaultMenuOptionsArrayDefault context menu options
defaultColumnsArrayDefault grid column definitions
defaultTaskTypesArrayDefault task type definitions
getEditorItems()FunctionReturns editor items merged with config
getToolbarButtons()FunctionReturns toolbar buttons merged with config
getMenuOptions()FunctionReturns menu options merged with config
registerScaleUnit()FunctionRegister a custom time scale unit
registerEditorItem()FunctionRegister a custom editor field component

​
Theme setup

SVAR Svelte Gantt ships with three themes: Willow (light), WillowDark (dark), and Material. Each theme is a Svelte component that wraps your Gantt instance and injects the required CSS custom properties. Wrap your <Gantt> component in a theme wrapper: 
<script>
  import { Gantt, Willow } from "@svar-ui/svelte-gantt";
</script>

<Willow>
  <Gantt {tasks} {links} {scales} />
</Willow>
To use a different theme, swap the wrapper: 
<script>
  import { Gantt, Willow } from "@svar-ui/svelte-gantt";
</script>

<Willow>
  <Gantt {tasks} {links} {scales} />
</Willow>
You can also apply a theme using CSS class names directly on a container element if you prefer not to use the wrapper components. See Theming for details.

​
Next steps

Quickstart

Build a working Gantt chart in minutes with a step-by-step guide.

Tasks and links

Learn the data structures for tasks, links, and milestones.

Build docs developers (and LLMs) love

Get started for freeTalk to us