Skip to main content
SVAR React Gantt is available as a free, MIT-licensed community edition and a PRO edition with additional automation logic and export capabilities. This page describes what is included in PRO and how to get started.
Visit the SVAR pricing page for a full feature comparison and free trial information.

​
What’s included in PRO

FeatureDescription
Auto-schedulingForward-mode scheduling that cascades task dates from a project start date, respecting Finish-to-Start dependencies
Work calendarDefine working hours per weekday and add custom rules (e.g. company holidays) to drive accurate duration calculations
Critical pathHighlight the longest dependency chain that determines the earliest possible project completion date
BaselinesStore and display original planned dates alongside live task bars for schedule variance analysis
Vertical markersPlace labelled vertical lines at any date on the timeline (e.g. “Today”, sprint boundaries, milestones)
Undo / redoStep backwards and forwards through every change made to tasks and links
Split tasksDivide a single task bar into multiple non-contiguous segments
Summary task automationAuto-calculate summary task progress from child tasks and auto-promote parent tasks to summary type
Export to PNG / PDF / ExcelClient-side or server-side export of the full chart
MS Project import / exportRound-trip exchange with Microsoft Project XML format

​
How to get PRO

1

Start a free trial

Go to svar.dev/react/gantt/pricing/ and start a free trial — no credit card required.
2

Install the PRO package

The PRO edition is distributed as a separate npm package. Follow the installation instructions provided after sign-up to replace the community package.
3

Enable PRO props

PRO features are activated by passing the relevant props to the <Gantt> component. No separate license component is required.

​
Minimal PRO setup

The example below enables auto-scheduling, a work calendar, critical path, baselines, and undo/redo in a single component: 
import { Gantt } from '@svar-ui/react-gantt';
import { Calendar } from '@svar-ui/gantt-store';
import '@svar-ui/react-gantt/all.css';

const calendar = new Calendar({
  weekHours: {
    monday: 8, tuesday: 8, wednesday: 8,
    thursday: 8, friday: 8,
    saturday: 0, sunday: 0,
  },
});

const tasks = [
  {
    id: 1, text: 'Design', type: 'task',
    start: new Date(2026, 3, 2), duration: 5, progress: 0,
    base_start: new Date(2026, 3, 2), base_end: new Date(2026, 3, 7),
  },
  {
    id: 2, text: 'Development', type: 'task',
    start: new Date(2026, 3, 9), duration: 10, progress: 0,
    base_start: new Date(2026, 3, 9), base_end: new Date(2026, 3, 21),
  },
];

const links = [
  { id: 1, source: 1, target: 2, type: 'e2s' }, // End-to-start (Finish-to-Start)
];

export default function App() {
  return (
    <Gantt
      tasks={tasks}
      links={links}
      calendar={calendar}
      schedule={{ auto: true }}
      projectStart={new Date(2026, 3, 2)}
      projectEnd={new Date(2026, 4, 30)}
      criticalPath={{ type: 'flexible' }}
      baselines={true}
      cellHeight={45}
      undo={true}
    />
  );
}

​
PRO feature pages

Auto-scheduling

Forward-mode scheduling, work calendars, project boundaries, unscheduled tasks, and undo/redo

Critical path

Calculate and visually highlight the critical path through your project

Baselines and markers

Compare live schedule against a baseline and add vertical timeline markers

Export

Export to PNG, PDF, Excel, and MS Project; import from MS Project XML

Build docs developers (and LLMs) love

Get started for freeTalk to us