We’re excited to announce a major update for SVAR React Gantt, our open-source Gantt chart component for React applications. This release brings long-awaited React 19 support and makes the package officially available on GitHub under the GPLv3 — something many developers have been asking for.
Version 2.3 also includes TypeScript support and powerful new capabilities.
Key highlights:
- React 19 and TypeScript support
- Flexible time precision (hours, minutes, custom scales)
- Configurable auto-scaling for start/end dates
- Configurable sidebar or modal Editor with validation
- Multi-sorting and column visibility control in the task grid
- In-cell editing and custom HTML for grid cells
- Keyboard shortcuts for common actions
To get started with the upgraded SVAR React Gantt, install the latest version of the component via npm:
npm install @svar-ui/react-gantt⚠️ Note: starting from this major update SVAR React Gantt is moved to @svar-ui/ namespace.
For detailed installation and setup instructions, see:
React 19 & TypeScript
SVAR React Gantt now fully supports React 19, ensuring smooth integration with the latest features and performance improvements in the React ecosystem. The component now comes with official TypeScript definitions, ensuring better IDE support, type safety, and a more reliable development experience.
Custom Time Units
Version 2.3 introduces support for hour-level durations and minute-level precision. You can now define the duration of a task in hours using the new durationUnit property. When set to "hour", the task editor will allow selecting both date and time, which is especially useful for detailed scheduling or shift-based planning.
Docs | Demo
You can also display tasks with minute-level scale precision via the lengthUnit property, giving developers full control over the smallest visible unit on the chart.
Docs | Demo
Flexible Time Scales
The new version adds support for custom time scale units, enabling developers to divide the Gantt timeline into any structure: sprints, quarters, or even unique phases with variable durations.
With custom scale units, you’re no longer limited to predefined timeframes and can fully adapt the timeline to your application requirements.
Docs | Demo
A new autoScale property lets you control whether the chart’s timeline adapts to your data or remains fixed. This is particularly helpful when your Gantt chart starts empty or when tasks are dynamically added or modified.
Docs | Demo
Task Grid: Sorting, Editing, Column Visibility
The grid view in SVAR React Gantt received a major upgrade, adding features that simplify task management and give users more control:
- Multi-column sorting – reorder and combine sort criteria dynamically
- In-cell editing – edit task data directly inside the grid with built-in editors (text, combo, richselect, datepicker) or add your custom ones - demo
- Custom HTML in cells – flexible content rendering - demo
- Header menu – show or hide columns with a simple context menu - demo
These updates make SVAR React Gantt more powerful and intuitive for end users managing large timelines.
Integration with SVAR Editor
Starting from v2.3, the task editor is now a standalone component, based on SVAR React Editor and imported separately. This offers greater flexibility and customization compared to the older built-in form.
The new Editor allows you to:
- Display the form as a sidebar or modal window
- Configure form fields and validation
- Choose between auto-save or manual save workflows
Hotkeys Support
SVAR React Gantt now supports keyboard shortcuts for the common actions — copy, cut, paste, delete tasks, open editor, and navigate through the grid. These hotkeys make the chart more convenient to use for advanced users.
Docs
UX Improvements & Localization
Version 2.3 brings several user experience enhancements. Task tooltips now can appear when hovering over taskbars, displaying additional details like duration, progress, or custom fields. You can fully customize tooltip content to show exactly what your users need.
Docs | Demo
The new fullscreen mode lets users focus on the timeline without distractions — perfect for presentations or detailed planning sessions.
Docs
The resizing control lets you switch between grid-only, chart-only, or combined views and adjust the proportions of the grid and chart dynamically. The “action” column is now used exclusively for adding new tasks, and you can remove it entirely for a cleaner layout.
We’ve also added localization support so you can now easily adjust the Gantt chart’s interface to different languages based on your application’s locale settings.
Docs | Demo
Summing Up
With this update, SVAR React Gantt is now fully compatible with React 19, making it ready for modern production environments and open-source projects alike. You can explore and fork the package directly on React Gantt’s GitHub repo and take advantage of the new customization options introduced in v2.3.
Whether you’re building a project management app, a scheduling tool, or a planning dashboard, SVAR React Gantt provides a powerful timeline component under the GPLv3 license. And if you’d like to use it in a commercial project, feel free to contact us for the details.