DEV Community: Olga T.

Vue UI Components & Libraries for Project Scheduling

Olga T. — Wed, 17 Jun 2026 13:18:11 +0000

Project management applications vary widely in scope. This post focuses on a specific slice — Gantt charts and calendar views: the two components that are hardest to build from scratch and most critical for visualizing project timelines and schedules.

If you're building anything that needs to answer "what's happening when, in what order, and who's responsible for all of this?" — a project planner, resource scheduler, or content calendar — you'll likely need one or both. Here are the most popular options for Vue ecosystem.

Calendars and Gantt Charts

FullCalendar

FullCalendar is one of the most widely used calendar libraries in the JavaScript ecosystem. It has a solid Vue wrapper and supports month, week, day, list, and timeline views out of the box.

It may help you if you’re building event scheduling, booking systems, and appointment UIs. Its timeline view can look like a Gantt, but it doesn't support dependency links or critical path, so it works well for simplified project views.

Good for: Event scheduling, booking flows, calendar-heavy UIs
License: MIT (open-source core) + Pro tier for premium views

Install it via npm:

npm install fullcalendar

Schedule-X

Schedule-X is a lightweight alternative to FullCalendar. It's built with modern web standards in mind and ships with a clean default UI — no extra CSS battles required.
It focuses specifically on calendar workflows: creating and moving events, recurring schedules, drag-and-drop.

Install it via npm (calendar, its theme and the Temporal API to handle dates and times):

npm i @schedule-x/calendar @schedule-x/theme-default temporal-polyfill

Good for: SaaS products that need simple, good-looking event scheduling
License: MIT (open-source core) + Pro tier

GSTC

GSTC (Gantt Schedule Timeline Calendar) is a framework-agnostic Gantt + timeline library with a Vue integration. It handles complex timelines with rows, items, and time-based layout at a high level of configurability.

With GSTC, you get more control but also more setup work. Good if you need a timeline that doesn't fit a standard mold.

Install it via npm:

npm i gantt-schedule-timeline-calendar

Good for: Custom timeline interfaces, highly configurable Gantt views
License: MIT (open-source) + Pro tier

Vue UI Suites with Project Management Features

Sometimes a component library that bundles everything — grid, Gantt, calendar, forms — is more practical than assembling pieces from multiple sources. So if you're building project management apps with Vue, take a look at the component libraries below.

Vuetify

Vuetify is the most widely adopted Material Design component library for Vue. In addition to the list of the most common UI components for layout, forms, and navigation, it includes a calendar component for event scheduling.

If you're already using Vuetify for your app's design system, its calendar can cover basic scheduling use cases.

To get started with Vuetify 4, you can install it via npm:

npm create vuetify@latest

Good for: Apps already using Vuetify, basic calendar/event display
License: MIT

SVAR Vue Components

SVAR Vue is an open-source Vue 3 component library built for data-heavy and scheduling-heavy applications. It includes a Gantt chart with dependency support and auto-scheduling, an event calendar with multiple views, a virtualized data grid, a Kanban board (coming soon), and Core components for general app needs (form controls, etc).

The components share a consistent visual language, which helps when combining them in a single app — for example, a Gantt for planning alongside a calendar for scheduling.

Each component should be installed separately:

npm install @svar-ui/vue-gantt 
npm install @svar-ui/vue-core

Good for: Advanced PM tools, enterprise dashboards, apps combining Gantt + calendar + grid, resource planning systems
License: MIT core + PRO tier (commercial features)

Syncfusion Vue Components

Syncfusion is a comprehensive enterprise UI suite with Vue support. It includes a full-featured Gantt, scheduler, kanban, and data grid.

The components are polished and well-documented. The main trade-off is the commercial license — though there's a free community license available for individuals and small teams.

Each component is installed separately, for example the datagrid:

npm install @syncfusion/ej2-vue-grids --save

Good for: Enterprise apps, teams needing consistent cross-component UX with vendor support
License: Commercial (community license available for qualifying teams)

DHTMLX Suite for Vue

DHTMLX Suite for Vue is a UI library built around data-heavy application patterns. It has a long track record in Gantt-based project planning — dependency handling, critical path, resource histograms, and detailed timeline control are all first-class features.

DHTMLX Vue JS Gantt is one of the most feature-rich Gantt libraries available for JavaScript applications, but the full version requires a commercial license.

The trial version of the Gantt chart, for example, can be installed via npm:

npm install @dhtmlx/trial-vue-gantt

Good for: Feature-rich Gantt implementations, internal project management tools
License: Commercial (some OSS components available separately)

Kendo UI for Vue (by Progress)

Kendo UI for Vue provides a structured set of business-focused, native-Vue UI components. The suite includes Gantt chart, scheduling tools, data grid, layout and form components.

This is a suite of modular components. This is how you install these components: The Grid, the DropDownList and the Window:

npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing @progress/kendo-svg-icons @progress/kendo-vue-indicators

Good for: Enterprise apps, teams already in the Telerik ecosystem
License: Commercial

DevExtreme Vue (by DevExpress)

DevExtreme Vue is used heavily in enterprise dashboards and internal business systems. It includes scheduling, Gantt, data grid, and chart components, all with a consistent API style.

Like Kendo, it's most practical when used as a full suite rather than cherry-picking individual components.

To use the library, you need to install the devextreme and devextreme-vue npm packages:

npm install devextreme@24.2 devextreme-vue@24.2 --save --save-exact

Good for: Enterprise dashboards, internal tools, data-heavy admin panels
License: Commercial

Comparison Table

Below we're comparing the Vue UI suites so you can see what's included in each complete suite and how you can use them together in production applications.

Library	Gantt	Calendar	Vue-Native	License	Key Features	Best For
SVAR Vue	✅	✅	✅	MIT + PRO	Custom templates, priority support, TypeScript	Data-heavy apps requiring Gantt, Calendar, and Grid components
Vuetify	❌	✅	✅	MIT	Massive community, Material Design	Apps already using Vuetify
Syncfusion	✅	✅	Wrapper	Paid (community license)	Vendor support, rich components collection	Enterprise apps, full UI suite
DHTMLX	✅	✅	Wrapper	Paid	Advanced Gantt features, resource histograms	Feature-rich Gantt, construction/engineering
Kendo UI	✅	✅	✅	Paid	Long-term stability, Telerik ecosystem	Enterprise, .NET + JS stacks
DevExtreme	✅	✅	Wrapper	Paid	Enterprise support, consistent API, BI focus	Enterprise dashboards, internal tools

Conclusion

Building a project management app for production with Vue doesn't mean starting from scratch. Use these libraries to save weeks of development time:

Use Case	Top Recommendation
Gantt + Calendar combo	SVAR Vue (MIT core + advanced features in PRO)
Event scheduling only	FullCalendar (industry standard)
Enterprise full suite	Syncfusion or Kendo UI (vendor support)
Advanced Gantt only	DHTMLX (most feature-complete)

Honorable Mentions

A few other Vue projects are worth mentioning. Vue Cal is a dedicated Vue calendar component that focuses on event scheduling and drag-and-drop interactions.

PrimeVue and Quasar are popular Vue UI frameworks with rich collections of form controls, data tables, charts, and application layout components. While they don't currently provide full-featured Gantt chart components, they are often used as the foundation for project management applications that integrate specialized scheduling libraries such as FullCalendar or GSTC.

Cover illustration by Sayyam Abbasi on Unsplash

Top Free, Open-Source Vue Gantt Charts

Olga T. — Mon, 15 Jun 2026 06:16:00 +0000

If you’re building a custom project management app in Vue, you’ll probably need a Gantt chart to visualize project timelines. Gantt charts are a proven way to show tasks and dependencies on a time scale and make project workflows easier to understand.

So if you need a Gantt chart in a Vue app, the first thing you’ll likely notice is that there aren’t a ton of Vue-native options. The good news is that there are still a few solid free tools worth trying, whether you want a native Vue component or a library that’s easy to wire into your project.

I’ve kept this list to free options only, so you can quickly compare what’s available when your budget is tight.

SVAR Vue Gantt

SVAR Vue Gantt is a native Vue 3 Gantt component with a free MIT-licensed core and optional PRO features. It’s a good fit if you want something that feels like part of the Vue ecosystem instead of a wrapper around a JS engine.

The free core provides a fundamental features of the Gantt chart: customizable time scale, tasks, dependencies, drag-and-drop task editing and built-in editor, context menu, toolbar, and more.

Install via npm:

npm install @svar-ui/vue-gantt

Key features

Drag-and-drop UI
Task editing, dependencies, and configurable timelines
Hierarchical task view
Virtualization for large datasets
Task sorting and filtering
Light and dark themes
Keyboard navigation
Localization
Free core with advanced scheduling available in PRO

License: MIT for the core – see on GitHub.
Optional PRO edition available for advanced scheduling features and resource planning.

When to use: Use it when you want a Vue-native Gantt chart with a free starting point. Good choice for project dashboards, scheduling views, and apps that may need more advanced planning later. Nice option if you want to start free and upgrade only if you need the extra scheduling features.

Vue-Ganttastic

Vue-Ganttastic is a simple Vue Gantt component that covers the basics without much setup. It’s the kind of library you reach for when you want task bars on a timeline and don’t need a full project planning engine.

Install via npm:

npm install @infectoone/vue-ganttastic

Key features

Basic drag-and-drop task bars
Simple API
Bar labels, HTML, and styling
Row drag-and-drop
Various time units (hours, days, weeks, months)
Pre-made themes
Locale support via Day.js

License: MIT - see on GitHub.

When to use: Use it for prototypes, MVPs, and small internal tools. Good if you just need a basic Gantt UI and want to move fast. Not the best fit if you need advanced scheduling logic.

HyVueGantt

HyVueGantt is a newer Vue Gantt component that sits somewhere between "super simple" and "full enterprise scheduling". It gives you more interactive UI features than a minimal timeline library, while still staying relatively straightforward.

Install via npm:

npm install hy-vue-gantt

Key features

Drag-and-drop
Task dependencies
Hierarchical task grouping
Customizable date formats and time scales
Flexible time units
Keyboard navigation
Undo/redo
Built-in color schemes

License: MIT - see on GitHub.

When to use: Use it when Vue-Ganttastic feels too minimal, and you need more control over the look and feel of the chart. Good for internal tools and modern project views. A reasonable pick if you want a free Vue Gantt with a bit more UI power.

gantt-schedule-timeline-calendar

gantt-schedule-timeline-calendar is not a traditional Gantt component, but it can work well if you need a flexible timeline UI. It’s more like a scheduling engine that you shape into the interface you want.

It's a JavaScript component but includes Vue integration example to help you get started.

Install via npm:

npm i gantt-schedule-timeline-calendar

Key features:

Drag-and-drop task editing
Tasks and dependencies
Vertical markers
Virtualized rendering for large datasets
Highly customizable timeline layouts
Show/hide weekends
Light and dark themes
Flexible item, row, and time-range rendering

License: Free for non-profit use - see on GitHub. Paid for commercial use.

When to use: Use it for custom timeline or scheduling interfaces. Good if you need a lot of control over layout and behavior. Not ideal if you want a ready-made Gantt chart with standard project-management features.

Quick pick

If I had to keep it simple:

Need an interactive, customizable Vue Gantt for project scheduling? Go with SVAR Vue Gantt.
Need something basic and easy? Try Vue-Ganttastic.
Need a more interactive free Vue option? Look at HyVueGantt.
Need a custom timeline engine? Check out GSTC.

Bonus - paid options

If you're ready to consider a paid Gantt chart library for your Vue app, you may look into these production-ready and well-maintained options:

SVAR Vue Gantt PRO - as mentioned before, try it for advanced scheduling features and resource planning
DHTMLX Vue Gantt - battle-tested, full-featured JS Gantt chart component with a Vue wrapper
AmCharts Gantt - JavaScript solution that comes with the Vue integration tutorial
Syncfusion Vue Gantt - mature Gantt chart component, a part of Syncfusion ecosystem

New Calendar Component for React, Svelte & Vue

Olga T. — Fri, 12 Jun 2026 13:08:15 +0000

If you’re looking for an event calendar for your web app and considering ready-to-use libraries, you’ve probably noticed that many open-source options cover the basics but leave you to build the rest yourself. On the other hand, enterprise-grade tools often include the features you need, but they also come with a higher price tag and more complexity.

SVAR Calendar addresses both of these pain points at once — a modern, framework-native event calendar for React, Svelte, and Vue with a free MIT-licensed core and a PRO edition for advanced scheduling needs.

👉 See the live demo

SVAR Calendar: Open-Source Core under MIT

The open-source edition of SVAR Calendar is released under the MIT license, meaning you can use it freely in personal projects, open-source applications, and commercial products.

🛠 Fork the calendar components on GitHub: React • Svelte • Vue

The free core already includes everything needed to build a fully functional scheduling UI:

Day, Week, and Month views — three built-in layouts covering the most common scheduling patterns, from hour-by-hour daily planning to high-level monthly overviews.
Drag-and-drop editing — move events, resize them to adjust duration, or create new ones with a drag-to-create gesture directly on the time grid. The same interactions you're used to in Google Calendar or the iOS Calendar app.
Built-in event editor — a sidebar or modal edit form for updating event details, with support for custom fields, comments, and task lists.
Calendar groups — organize events by category (Work, Personal, Holidays, etc.) and toggle them on or off from a sidebar panel. Each group gets its own color.
Filtering — filter events by text, natural language query, or stack multiple conditions using the SVAR Filter engine.
iCal import/export — load .ics files from external calendars or export events for syncing with Google Calendar, Outlook, or Apple Calendar.
Theming and localization — built-in light and dark themes, CSS variable overrides, and localization support for labels and date formats.
Backend integration — connect to any REST API with the built-in RestDataProvider that handles data loading and CRUD syncing automatically.

Installation is straightforward, for React, Svelte and Vue accordingly:

npm install @svar-ui/react-calendar
npm install @svar-ui/svelte-calendar
npm install @svar-ui/vue-calendar

All three versions share a unified API and feature set, yet remain separate, framework-native components — no wrappers, no adapters, full TypeScript support across all three.

A Quick Svelte Example

Drop this snippet into your Svelte project and you'll immediately get a working weekly calendar with two color-coded groups, sample events, a sidebar calendar selector, and the built-in editor:

<script>
  import { Calendar, Editor, CalendarPanel } from "@svar-ui/svelte-calendar";

  let api = $state();

  const calendars = [
    { id: "work", label: "Work" },
    { id: "personal", label: "Personal" },
  ];

  const events = [
    {
      id: 1,
      start: new Date(2026, 4, 4, 9, 0),
      end: new Date(2026, 4, 4, 9, 30),
      text: "Daily standup",
      calendarId: "work",
    },
    {
      id: 2,
      start: new Date(2026, 4, 4, 13, 0),
      end: new Date(2026, 4, 4, 14, 0),
      text: "Lunch with team",
      calendarId: "personal",
    },
  ];
</script>

<Calendar bind:this={api} {events} view="week">
  <CalendarPanel {calendars} accessor="calendarId" />
</Calendar>

<Editor {api} />

Using React or Vue? The structure is almost identical — same API, same logic, just written with framework-native syntax.

👉 Find the detailed getting started guides in SVAR docs.

SVAR Calendar PRO with Additional Views

For teams that need more than the everyday scheduling basics, the PRO edition adds four advanced views and recurring event support:

Year View — all twelve months at a glance, with busy-day markers, today highlighted, and event previews on hover. Useful if your app needs a wide-angle view of the schedule.

Here's an example of how to enable an additional PRO view. Set view="year" and include "year" in the views prop, which defaults to ["day", "week", "month"].

<script>
  import { Calendar } from "@svar-ui/svelte-calendar";

  const events = [
    { id: 1, start: new Date(2025, 2, 10, 9), end: new Date(2025, 2, 10, 10), text: "Meeting" },
    { id: 2, start: new Date(2025, 2, 9), end: new Date(2025, 2, 12), text: "Conference" },
  ];
</script>

<Calendar
  {events}
  view="year"
  date={new Date(2025, 5, 15)}
  views={["year", "day", "week", "month"]}
/>

Agenda View — a clean, chronological list of events grouped by day. A natural fit for mobile layouts, daily briefing widgets, or customer-facing portals.

Resources View — a single-day schedule split into columns, one per resource such as rooms, people, or equipment. Particularly useful for booking calendars.

Timeline View — a horizontal single-day layout with each resource as its own row and events rendered as time-length bars. Well suited for shift planning, task timelines, and rental platforms.

Recurring Events — create repeating schedules using RRULE with full control over series updates, single-occurrence edits, and forward-only changes.

A 30-day free trial is available for teams who want to evaluate PRO features.

Wrapping Up

SVAR Calendar gives React, Svelte, and Vue developers a modern, framework-native event calendar that makes it easier to add scheduling interfaces to their apps with familiar code and flexible APIs.

Whether you’re adding a simple weekly planner to an internal tool or building a full resource booking system, the free edition gets you further than most libraries. The PRO edition adds advanced views and recurrence support for more complex booking and resource management scenarios.

Find the demos and docs for each version here:

If SVAR Calendar saves you time, a GitHub star helps other developers find it and motivates us to move forward with the new features and improvements ⭐

If you need a Gantt chart for your React app, check this list.

Olga T. — Thu, 07 May 2026 09:15:21 +0000

Marina Char.

May 5

Best React Gantt Chart Libraries for Project Management Apps

#webdev #react #programming #gantt

10 min read

Fast, Flexible, Feature-Rich DataGrid for Vue 3 Apps

Olga T. — Mon, 20 Apr 2026 12:11:29 +0000

If you've worked with data grids in Vue, you've probably hit the same wall at some point. The grid works fine for the demo, then you add real data, real editing requirements, and real users — and suddenly you're fighting the component instead of building your app.

Or you find a capable pre-made grid component, only to discover it's a JavaScript library wrapped in a Vue adapter, and customization means digging into JS code instead of working with the familiar Vue API.

That's why we built SVAR Vue DataGrid. The component is open-source, written entirely in Vue 3 and optimized for data-heavy scenarios, with fast loading and rendering, data editing, sorting, and filtering features.

Here’s a quick overview of what our Vue data grid component is capable of:

Vue-native architecture with a logical, developer-friendly API
High performance with large datasets (virtualization for rows and columns)
Accessibility with WAI-ARIA compliance and full keyboard navigation
Sorting, filtering, and in-cell editing (built-in and custom editors)
Flexible configuration of columns and rows
Light and dark themes easily customizable with CSS
Responsive mode adjustable for different screen sizes
Export to CSV and print support

You can find SVAR Vue DataGrid on GitHub ⭐

Getting started

Install SVAR Vue DataGrid via npm:

npm install @svar-ui/vue-grid

A basic table with data and columns is just a few lines:

<script setup>
import { Grid, Willow } from "@svar-ui/vue-grid";

const data = [
  { id: 1, city: "Amieshire", firstName: "Ernest", lastName: "Schuppe", email: "Leora13@yahoo.com" },
  { id: 2, city: "Gust", firstName: "Janis", lastName: "Vandervort", email: "Mose_Gerhold51@yahoo.com" },
];

const columns = [
  { id: "id", width: 50 },
  { id: "firstName", header: "First Name", width: 150 },
  { id: "lastName", header: "Last Name", width: 150 },
  { id: "city", header: "City", width: 100 },
  { id: "email", header: "Email" },
];
</script>

<template>
  <Willow>
    <Grid :data="data" :columns="columns" />
  </Willow>
</template>

Wrap the grid in <Willow> (or <WillowDark>) to apply a light or dark theme. That's all it takes to get a working, styled table on the page.

What it handles out of the box

The honest reason most teams end up with complex custom grid code is that they started with a library that covered 80% of their needs — and spent months filling in the other 20%. SVAR Vue DataGrid tries to ship that other 20% by default.

Sorting works across multiple columns with customizable sort logic.

Filtering can be added as inline header filters for quick access, and for more advanced scenarios the data grid integrates with SVAR Vue Filter. The filter component adds an advanced visual query builder with AND/OR logic, syntax-based filtering, and optional natural language search.

Data editing is supported by built-in cell editors (text, combo, datepicker, richselect), custom Vue components as editors, and external form integration via SVAR Vue Editor. There's also an undo/redo feature, which makes editing large datasets more convenient.

Layout-wise, you get column grouping, header spanning, pinned columns, row drag-and-drop reordering, and visibility control. Context menus, cell tooltips, and a toolbar round out the everyday interactions.

Features that grids typically lock behind a paywall: tree data, lazy loading, advanced filtering, context menus, rich select for in-cell editing are included here under MIT.

Working with large datasets

Virtual scrolling handles both rows and columns, so rendering stays efficient even with thousands of rows. Dynamic loading lets you fetch data on scroll rather than loading everything upfront — useful when you're working with a large backend dataset and don't want to wait for the full payload on page load.

Here is how you can load data dynamically in batches of 100 rows:

<script setup>
import { Grid } from "@svar-ui/vue-grid";
import { ref } from "vue";
import { getData } from "./common/data";

const { allData, columns } = getData();

const rowCount = ref(allData.length);
const data = ref([]);

function dataProvider(ev) {
  const { row } = ev;
  if (row) {
    data.value = allData.slice(row.start, row.end);
  }
}
</script>

<template>
  <Grid
    :data="data"
    :columns="columns"
    :dynamic="{ rowCount }"
    :@request-data="dataProvider"
  />
</template>

For easy backend integration, SVAR Vue DataGrid offers RestDataProvider, a special helper that handles CRUD operations and updates on the server side for these operations: add/update/delete row and cell update.

Why Vue-native matters

SVAR Vue DataGrid follows Vue's reactivity model. You can drop in your own Vue components as cell editors, use standard Vue patterns for event handling, and customize the grid any way you like.

Each data table is different and SVAR DataGrid gives you full control over the look-and-feel of the table, as well as its layout and features.

Try the data grid

If you are looking for a customizable, free, high-performance data grid for your Vue apps, just give it a try:

If you're building data-driven interfaces in Vue, SVAR Vue DataGrid can save you hours of work. Any feedback or feature requests are welcome on our forum.

SVAR Vue – New UI Component Library for Interactive Vue Apps

Olga T. — Tue, 14 Apr 2026 11:08:31 +0000

If you're building Vue projects and looking for a UI library to speed up your development, we have a new open-source Vue 3 component library waiting for you to try!

SVAR Vue library offers a set of pre-built, TypeScript-ready, well-designed components for most common use cases: form controls, navigation elements, modals, edit forms, and filtering UI.

What is SVAR Vue?

SVAR Vue is part of SVAR UI, a family of open-source component libraries built natively for modern JavaScript frameworks: Svelte, React and now Vue. "Natively" is the key word here: no wrappers or adapters — just a framework-first codebase.

Today we're releasing three SVAR packages for Vue 3:

SVAR Vue Core — a set of 30+ UI components for data-driven interfaces
SVAR Vue Editor — configurable edit forms for any structured data
SVAR Vue Filter — a complete filtering toolkit, from compact bars to query builders

All three are MIT-licensed and available on SVAR GitHub: Core, Editor, and Filter 🛠️

30+ Core Components

SVAR Vue Core library is the foundation. It gives you the everyday building blocks — buttons, checkboxes, radio inputs, select, datepicker, tabs, modals, notifications, sidebar panel, and more. All components are designed for data-intensive apps with virtualization and dynamic loading built in.

Themes (light and dark) are included out of the box and fully customizable via CSS variables. Menu, Toolbar, Comments, and Tasklist are available as separate add-ons, so your bundle only includes what you actually use.

This is how you install SVAR Vue Core library and Menu component via npm:

npm install @svar-ui/vue-core
npm install @svar-ui/vue-menu

The example code of adding a simple button:

<script setup>
import { Button, Willow } from "@svar-ui/vue-core";
</script>

<template>
  <Willow>
    <!-- Place your application code here -->
    <Button>Click Me</Button>
  </Willow>
</template>

Wrap your app in <Willow> (or <WillowDark>) to apply the theme globally. Find the full component list in the Vue Core docs.

Configurable Edit Form

SVAR Vue Editor component solves a specific but very common problem: you have structured data — a user profile, a product record, a table row, an info card — and you need an edit form for it. Building that from scratch every time is tedious.

The Editor gives you a configurable form component you can attach to any data structure and display as a popup, sidebar, or inline form.

It integrates natively with all SVAR Vue Core controls, supports one and two-column layouts, collapsible and accordion sections, custom validation, and both auto-save and on-action save modes.

To install SVAR Vue Editor, use:

npm install @svar-ui/vue-editor

Then you can add an edit form with preloaded data like this:

<script setup>
import { Editor, Willow } from "@svar-ui/vue-editor";

const items = [
  { comp: "text",     key: "name",  label: "Name" },
  { comp: "textarea", key: "descr", label: "Description" },
  { comp: "checkbox", key: "admin", label: "Is Admin" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  admin: true
};
</script>

<template>
  <Willow>
    <Editor :items="items" :values="values" />
  </Willow>
</template>

Each item in the items array defines a field type (comp), a data key, and a label. The values object preloads the form — useful when editing an existing record. Add :readonly="true" to render the same form in read-only mode.

Flexible Filter Library

SVAR Vue Filter is a library of four components, each aimed for a different level of filtering complexity:

FilterBar — compact inline search
FilterEditor — single-field rule editor
FilterBuilder — full visual query builder with nested AND/OR logic
FilterQuery — a YouTrack-style input with autocomplete, syntax highlighting, and an optional natural language mode

With the FilterBuilder, you can create an intuitive query builder interface with nested fields, boolean logic, and give your users a tool to configure complex filters with ease.

FilterQuery is also worth calling out: its natural language mode connects to an AI/NLP endpoint and converts plain-text queries like "tasks created last week assigned to me" into structured filter rules. Users can see these rules and edit them to find data they need.

The Filter library is installed like this:

npm install @svar-ui/vue-filter

Find the full API and examples in the Filter docs.

What Vue Components Are Coming Next

Core, Editor, and Filter are the foundation for the broader SVAR Vue component library. We plan to release next:

Vue DataGrid — fast, feature-rich, and accessible data grid
Vue Gantt Chart — interactive timeline and project management
Vue File Manager — file browsing and management UI

We're glad to finally be in the Vue ecosystem. Try the packages, check the docs, see the demos, and let us know what you think. The idea behind SVAR has always been simple: the best component library is the one that lets you ship using the code you already know.

Happy coding! 💻

SVAR Gantt 2.4: A Free, Modern Gantt Chart for React & Svelte

Olga T. — Tue, 06 Jan 2026 09:20:00 +0000

Gantt charts remain one of the most powerful tools for project management. They help to visualize project timelines, see task dependencies, and track progress.

If you need to integrate a Gantt chart in your web application, you’ll probably try to find if any ready-to-use solution exists. And if you do, you’ll quickly notice that many available libraries come with restrictive or expensive licenses, heavy wrappers around legacy code, limited flexibility or feature sets, or haven’t been updated for years.

With SVAR Gantt v2.4, we’re addressing several of these pain points at once, providing a modern, customizable Gantt chart library for React and Svelte.

This release introduces:

a permissive MIT license for the open-source core,
a new PRO Edition for advanced scheduling needs,
an MCP server that makes AI-assisted development actually useful in real projects (currently available for the React Gantt only).

SVAR Gantt 2.4: Open-Source Core under MIT

Starting with version 2.4, the open-source edition of SVAR Gantt is released under the MIT license. This means you can now use the Gantt component freely in personal projects, open-source applications or commercial products.

The MIT-licensed core already includes everything needed to build a fully functional and modern project planning UI. It provides a flexible task grid and timeline, support for hierarchical and summary tasks, task dependencies, customizable time scales, zooming, intuitive task edit form, and drag-and-drop editing directly on the chart.

The component is highly customizable, supports light and dark themes, localization, and keyboard navigation.

Installation remains straightforward. For React:

npm install @svar-ui/react-gantt

or, for Svelte:

npm install @svar-ui/svelte-gantt

We’re committed to actively maintaining and improving the open-source edition alongside the PRO version. Version 2.4 brings several practical improvements that focus on usability and developer experience:

Inline Dependency Removal - You can now remove task dependencies directly on the timeline. Click a dependency line, use the remove icon, and the relationship is gone — no need to open an edit form for simple changes.

Locale-Aware Scale Formatting - Timeline scale labels now respect the active locale automatically. Date formats adapt to regional conventions, including week start settings, without additional configuration.

These changes may look small, but they significantly reduce friction when working with real project data.

Introducing SVAR Gantt PRO Edition

SVAR Gantt v.2.4 also introduces a PRO Edition for teams that need more advanced scheduling logic. The PRO Edition adds advanced planning and calculation features commonly found in enterprise project management tools:

Non-linear time scales (work days calendar)
Auto-scheduling (Finish-to-Start dependencies)
Critical path
Baselines
Split tasks
Unscheduled tasks, and more

A 30-day free trial is available for teams who want to evaluate the PRO features: React Gantt PRO Trial & Svelte Gantt PRO Trial.

AI-Assisted Development for React Gantt

SVAR React Gantt now includes a Model Context Protocol (MCP) server. When connected to tools like Cursor, Claude Code, or Gemini, the MCP server gives your AI assistant direct access to current documentation, API references, and live demos.

This helps avoid outdated examples and incorrect suggestions when integrating or customizing the Gantt chart with AI code assistants.

SVAR Component Library v2.4 (React & Svelte)

Alongside the SVAR Gantt release, we’ve also updated our entire open-source SVAR Svelte and SVAR React component library.

This update focuses on performance, consistency, and UI/UX improvements across Core components and DataGrid, making the library a solid foundation for modern React and Svelte applications.

Core Components Highlights

disabled menu items (clearer UX without hiding actions)
new Fullscreen component
simplified field label handling
smarter popup positioning and alignment

DataGrid Enhancements

built-in customizable toolbar
expanded context menu (copy, paste, move, undo/redo)
variable row heights
customizable sorting logic

These updates make the DataGrid a solid choice for displaying tabular data in Svelte or React applications, while maintaining fast loading and rendering performance. At the same time, the SVAR Core library has become even more convenient and flexible for building modern web interfaces.

Wrapping Up

With SVAR Gantt v2.4, we're making modern Gantt chart integration straightforward for React and Svelte developers. The MIT-licensed core handles most project planning needs out of the box. The PRO Edition adds advanced scheduling for complex enterprise scenarios.

This release is part of our ongoing commitment to providing high-quality, actively maintained UI components for modern JavaScript frameworks. We're continuing to develop both editions based on real-world usage and community feedback.

Resources:

Documentation
Demos
GitHub Repository
Gantt PRO Free Trial: React | Svelte

Start building with SVAR components today!

🎃 Create a React Gantt Chart with SVAR Gantt (Halloween-Edition)

Olga T. — Fri, 31 Oct 2025 15:30:58 +0000

This Halloween I invite you to create something both functional and fun! In this tutorial, we’ll build a Halloween-themed task manager using SVAR React Gantt, a powerful, open-source project management component that can easily handle serious enterprise workloads… but today, we’re giving it a spooky twist.

The demo app will track the ultimate October project — organizing a Halloween party. You’ll plan tasks, set dates, and assign responsibilities, so you can later know who’s to blame if the candy runs out 😝

You’ll learn how to use SVAR React Gantt to:

Add a Gantt chart and fill it with data
Customize the task editor
Add a context menu and tooltips
Customize the default theme

And while it’s fun to play with pumpkins and ghosts, everything here translates directly to production-grade project management apps.

Useful links:

Online demo: see the Halloween-styled Gantt chart demo
Demo package: download the demo package
GitHub: find the source code of SVAR React Gantt

Including Sources

We start by installing SVAR Gantt Chart source files via npm:

npm install @svar-ui/react-gantt

Adding Gantt Chart on a Page

Import SVAR Gantt, the CSS styles, and the desired theme. The task manager comes with light and dark skins: Willow and WillowDark. To give the chart a spooky styling, in our tutorial we’ll use WillowDark theme as a basis.

Component.jsx

import { Gantt, WillowDark } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";

Add the Gantt on page and define a theme for it:

Component.jsx

import { Gantt, WillowDark } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";

function Component() {
  return (
    <WillowDark>
      <Gantt />
    </WillowDark>
  );
}
export default Component;

Filling Gantt Chart with Data

To bring our task manager to life, we need to provide the initial data for tasks and their links that form the project's structure at the initialization stage. The data includes four key elements: scales (timeline units), tasks (project activities with dates and progress), links (dependencies between tasks), and users (assignees for tasks).

data/index.js

const dayStyle = (date) => {
  const day = date.getDay() === 5 || date.getDay() === 6;
  return day ? 'sday' : '';
};

export const scales = [
  { unit: 'month', step: 1, format: 'MMMM yyy' },
  { unit: 'day', step: 1, format: 'd', css: dayStyle },
];

export const tasks = [
  {
    id: 1,
    start: new Date(2025, 9, 19),
    end: new Date(2025, 9, 25),
    text: 'Planning & Preparation',
    progress: 100,
    parent: 0,
    type: 'summary',
    open: true,
    details: '',
  },
  {
    id: 11,
    start: new Date(2025, 9, 19),
    end: new Date(2025, 9, 20),
    text: 'Set date',
    progress: 100,
    parent: 1,
    type: 'task',
    details:
      "Finalize the date and time for the Halloween party. Make sure it suits everyone's availability",
    to: 1,
  },
  // ... Other task data
];

export const links = [
  {
    id: 1,
    source: 11,
    target: 13,
    type: 'e2s',
  },
  // ... Other link data
];

export const users = [
  { id: 1, label: 'David' },
  { id: 2, label: 'Olivia' },
];

export function getData() {
  return { tasks, links, scales, users };
}

Since we keep our data on client side in a separate file, we need to import it and pass the corresponding data items to the Gantt component as props:

Component.jsx

import { useMemo, useState } from 'react';
import { Gantt, WillowDark } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";
import { getData } from '../data';

function Component() {
  const [api, setApi] = useState();

  const data = useMemo(() => getData(), []);

  return (
    <WillowDark>
      <Gantt 
        init={setApi}
        tasks={data.tasks} 
        links={data.links}
        scales={data.scales}
      />
    </WillowDark>
  );
}

export default Component;

For more information about preparing and loading data, refer to the following documentation section: Loading data.

Customizing Task Tree

The Gantt widget includes a left-hand panel that displays a task tree, providing users with an overview of project details. By default, this tree features four columns: Task Name, Start Date, Duration, and Action. While this layout provides detailed insights, it can also take up extra screen space, which is especially valuable in busy project views.

To create a more compact interface, we can adjust the task tree structure using the columns property. If we exclude the default Duration column, we can free up space on the screen, allowing for a cleaner view that keeps the focus on the most critical information: task name, start date, and the + button to add a new task.

Component.jsx

import { useMemo, useState } from 'react';
import { Gantt, WillowDark } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";
import { getData } from '../data';

function Component() {
  const [api, setApi] = useState();

  const data = useMemo(() => getData(), []);

  // Define the new structure of the Task Tree
  const columns = [
    { id: 'text', header: 'Task name', width: 210 },
    {
      id: 'start',
      header: 'Start date',
      width: 106,
      align: 'center',
    },
    { id: 'add-task', header: '', width: 40, align: 'center' },
  ];

  return (
    <WillowDark>
      <Gantt 
        init={setApi}
        tasks={data.tasks} 
        links={data.links}
        scales={data.scales}
        columns={columns}
      />
    </WillowDark>
  );
}

export default Component;

Adding Task Editor

The default editor of the Gantt chart provides a straightforward way for users to edit tasks and save changes directly on the chart. However, for our Halloween-themed project tracker, we'll enhance the standard editor by adding a custom field to assign responsibilities to each task.

Component.jsx

import { useMemo, useState } from 'react';
import { 
  Gantt, 
  WillowDark,
  Editor,
  defaultEditorItems // Import the default settings of the Gantt editor
} from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";
import { getData } from '../data';

function Component() {
  const [api, setApi] = useState();

  const data = useMemo(() => getData(), []);

  const columns = [
    { id: 'text', header: 'Task name', width: 210 },
    {
      id: 'start',
      header: 'Start date',
      width: 106,
      align: 'center',
    },
    { id: 'add-task', header: '', width: 40, align: 'center' },
  ];

  // Reshape the default editor settings to exclude unnecessary fields
  const editorItems = defaultEditorItems.filter(
    (op) => op.key !== 'duration' && op.key !== 'links'
  );

  // Add a custom field to assign the responsible user
  editorItems.splice(3, 0, {
    key: 'to',
    type: 'select',
    label: 'Goes to',
    options: data.users,
    config: { placeholder: 'Select the person' },
    comp: 'select',
  });

  return (
    <WillowDark>
      <Gantt 
        init={setApi}
        tasks={data.tasks} 
        links={data.links}
        scales={data.scales}
        columns={columns}
      />
      {api && <Editor api={api} autoSave={false} items={editorItems} />}
    </WillowDark>
  );
}

export default Component;

For more information about configuring the task editor, refer to the following documentation section: Configuring task editor.

Adding Context Menu

SVAR Gantt component uses ContextMenu component as a context menu. The menu can be packed with a wide range of options for managing tasks: editing, deleting, creating subtasks, and much more. While this full menu offers extensive functionality, our Halloween Gantt app requires a more compact, streamlined set of options to keep the interface clean and focused.

Let's customize the context menu and select only the essential options that suit our demo app's needs.

Component.jsx

import { useMemo, useState } from 'react';
import { 
  Gantt, 
  WillowDark,
  Editor,
  ContextMenu, // Import the built-in context menu
  defaultMenuOptions, // Import default menu options
  defaultEditorItems
} from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";
import { getData } from '../data';

function Component() {
  const [api, setApi] = useState();

  const data = useMemo(() => getData(), []);

  const columns = [
    { id: 'text', header: 'Task name', width: 210 },
    {
      id: 'start',
      header: 'Start date',
      width: 106,
      align: 'center',
    },
    { id: 'add-task', header: '', width: 40, align: 'center' },
  ];

  const editorItems = defaultEditorItems.filter(
    (op) => op.key !== 'duration' && op.key !== 'links'
  );
  editorItems.splice(3, 0, {
    key: 'to',
    type: 'select',
    label: 'Goes to',
    options: data.users,
    config: { placeholder: 'Select the person' },
    comp: 'select',
  });

  // Specify a set of available options within a custom context menu
  const ids = ['add-task', 'edit-task', 'delete-task', 'move-task'];

  // Reshape the default menu options considering the custom options
  const options = defaultMenuOptions.filter((op) => ids.indexOf(op.id) >= 0);

  return (
    <WillowDark>
      <ContextMenu api={api} options={options}>
        <Gantt 
          init={setApi}
          tasks={data.tasks} 
          links={data.links}
          scales={data.scales}
          columns={columns}
        />
      </ContextMenu>
      {api && <Editor api={api} autoSave={false} items={editorItems} />}
    </WillowDark>
  );
}

export default Component;

Please note that to activate the context menu features, you need to access Gantt API and pass it to the <ContextMenu api={api}> component. In this case we use the init prop to capture the API reference when Gantt initializes.

For more information on how to configure the context menu, refer to the following documentation section: Configuring the context menu.

Adding Tooltips

By default, the SVAR Gantt chart doesn't show tooltips. But we can easily activate this feature. All we need is to import the Tooltip component and wrap our Gantt component with it. Do not forget to provide the API reference as with the ContextMenu.

This simple setup will allow users to hover the pointer over a task or project and see a tooltip with the task's info.

Component.jsx

import { useMemo, useState } from 'react';
import { 
  Gantt, 
  WillowDark,
  Editor,
  ContextMenu,
  Tooltip, // Import the built-in tooltip
  defaultMenuOptions,
  defaultEditorItems
} from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";
import { getData } from '../data';

function Component() {
  const [api, setApi] = useState();

  const data = useMemo(() => getData(), []);

  const columns = [
    { id: 'text', header: 'Task name', width: 210 },
    {
      id: 'start',
      header: 'Start date',
      width: 106,
      align: 'center',
    },
    { id: 'add-task', header: '', width: 40, align: 'center' },
  ];

  const editorItems = defaultEditorItems.filter(
    (op) => op.key !== 'duration' && op.key !== 'links'
  );
  editorItems.splice(3, 0, {
    key: 'to',
    type: 'select',
    label: 'Goes to',
    options: data.users,
    config: { placeholder: 'Select the person' },
    comp: 'select',
  });

  const ids = ['add-task', 'edit-task', 'delete-task', 'move-task'];
  const options = defaultMenuOptions.filter((op) => ids.indexOf(op.id) >= 0);

  return (
    <WillowDark>
      <ContextMenu api={api} options={options}>
        <Tooltip api={api}>
          <Gantt 
            init={setApi}
            tasks={data.tasks} 
            links={data.links}
            scales={data.scales}
            columns={columns}
          />
        </Tooltip>
      </ContextMenu>
      {api && <Editor api={api} autoSave={false} items={editorItems} />}
    </WillowDark>
  );
}

export default Component;

For our Halloween-themed app, though, a simple title won't capture the full story. To make task details more accessible and engaging, we'll create a custom tooltip that displays the task description and assigned user.

First of all, we need to create a custom template for a tooltip. For convenience, we can put it in a separate file.

TooltipContent.jsx

import { users } from '../data'; // Import data for USERS to be displayed in a tooltip

export default function TooltipContent({ data }) {
  if (!data) return null;

  const { to, details } = data;

  return (
    <>
      {to || details ? (
        <div className="data">
          {details ? ( // Create a view for details (if exist)
            <div className="text">
              <span className="caption">🎃 Description: </span>
              <span className="details">{details}</span>
            </div>
          ) : null}
          {to ? ( // Create a view for assignee (if exists)
            <div className="text">
              <span className="caption">👻 Goes to: </span>
              {users.find((u) => u.id === to)?.label}
            </div>
          ) : null}
        </div>
      ) : null}
    </>
  );
}

TooltipContent.css

.data {
  background-color: #2b343b;
  padding: 8px 12px;
  width: 260px;
}

.text {
  width: 100%;
  height: fit-content;
  font-family: var(--wx-font-family);
  color: #ffffff;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 20px;
}

.text + .text {
  margin-top: 8px;
}

.text:last-child {
  margin-bottom: 0;
}

.details {
  word-wrap: break-word;
}

.caption {
  font-weight: 600;
}

After the tooltip template is ready, we can import and apply it via the Tooltip content property.

Component.jsx

import TooltipContent from './TooltipContent';
import './TooltipContent.css';

// ...
  <Tooltip api={api} content={TooltipContent}>
    <Gantt 
      init={setApi}
      tasks={data.tasks} 
      links={data.links}
      scales={data.scales}
      columns={columns}
    />
  </Tooltip>
// ...

For more information about configuring tooltips, refer to the following documentation section: Adding tooltips.

Tuning Look and Feel

When initializing the project, we applied the WillowDark skin, which provides a clean and elegant design. However, to truly capture the essence of Halloween, we need to go beyond the basics and incorporate custom styles that resonate with the season's spirit. The key customizations include a dark background, purple task bars, orange summary tasks, and lime green dependency links for that perfect Halloween vibe.

To change the default theme settings, create a separate CSS file with custom CSS variables and apply it to the Halloween Gantt app.

This is how we replace colors in Component.css (excerpt):

.content {
  --wx-background: #161616;
  --wx-color-primary: #3c2369;
  --wx-color-danger: #eb691f;

  --wx-gantt-summary-color: #ee8c1d;
  --wx-gantt-summary-fill-color: #eb691f;

  --wx-gantt-task-color: #3c2369;
  --wx-gantt-task-fill-color: #582c8f;

  --wx-gantt-link-color: #9ee41f;
  /* Other custom variables */
}

.content .wx-bar.wx-milestone .wx-content {
  background: url('/assets/pumpkin.svg') no-repeat center / cover;
}

Apply the styles by wrapping your component in a container with the content class:

Demo.jsx

import { WillowDark } from '@svar-ui/react-gantt';
import Component from './components/Component';
import './Component.css';

function Demo() {
  return (
    <div className="demo">
      <WillowDark />
      <div className="content wx-willow-dark-theme">
        <Component />
      </div>
    </div>
  );
}

export default Demo;

You can find the complete list of rules in the related demo.

Summing Up

With these tweaks, our Halloween task manager is ready to bring order (and a little mischief) to the seasonal chaos.

We’ve customized tooltips, streamlined the context menu, added user assignments, and wrapped everything in a festive theme, all powered by SVAR React Gantt!

If you enjoy working with SVAR React Gantt, we’d really appreciate your ⭐ on GitHub. It helps us grow and keep improving the component.

SVAR React Gantt v2.3: Modern Project Timelines for React 19

Olga T. — Fri, 24 Oct 2025 15:43:26 +0000

If you've ever built scheduling or project management tools in React, you know how much time goes into getting timelines, tasks, and dependencies just right. With SVAR React Gantt 2.3, that entire experience just leveled up.

What Is SVAR React Gantt?

SVAR React Gantt is a complete timeline component for React applications. It handles task dependencies, drag-and-drop scheduling, zoom levels, customizable time scales - all the complex features you don't want to build from scratch. Think of it as the timeline interface behind tools like Asana or Monday.com, but as a React component you control.

Version 2.3 introduces the most requested features from the developer community. This release brings React 19 compatibility, official TypeScript support, and makes the package available on GitHub under GPLv3.

But more importantly, it adds greater flexibility to create customizable timelines adjusted to your project requirements.

You can install the latest version of SVAR React Gantt via npm:

npm install @svar-ui/react-gantt

The example below shows how to create a simple chart with one summary task containing a subtask, plus two separate tasks linked by a dependency:

import { Gantt } from "@svar-ui/react-gantt";

export default function App() {
  const tasks = [
    {
      id: 20,
      text: "New Task",
      start: new Date(2024, 5, 11),
      end: new Date(2024, 6, 12),
      duration: 1,
      progress: 2,
      type: "task",
      lazy: false,
    },
    {
      id: 47,
      text: "[1] Master project",
      start: new Date(2024, 5, 12),
      end: new Date(2024, 7, 12),
      duration: 8,
      progress: 0,
      parent: 0,
      type: "summary",
    },
    {
      id: 22,
      text: "Task",
      start: new Date(2024, 7, 11),
      end: new Date(2024, 8, 12),
      duration: 8,
      progress: 0,
      parent: 47,
      type: "task",
    },
    {
      id: 21,
      text: "New Task 2",
      start: new Date(2024, 7, 10),
      end: new Date(2024, 8, 12),
      duration: 3,
      progress: 0,
      type: "task",
      lazy: false,
    },
  ];

  const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

  const scales = [
    { unit: "month", step: 1, format: "MMMM yyy" },
    { unit: "day", step: 1, format: "d" },
  ];

  return <Gantt tasks={tasks} links={links} scales={scales} />;
}

Let's look closer at what's new and why this release makes SVAR React Gantt one of the most capable open-source Gantt components for modern React apps.

Full React 19 + TypeScript Support

The foundation of v2.3 is compatibility with React 19, ensuring seamless integration with the latest concurrent rendering and performance improvements.

It also ships with TypeScript definitions, so you get proper type safety, and fewer runtime surprises right in your IDE.

Time Precision Beyond Days

SVAR React Gantt v2.3 doesn't stop at day-level planning, it adds hour and minute precision through two new properties:

durationUnit – defines duration of a task in hours or days
lengthUnit – defines the minimal unit for task bars (the task length) in a chart and can be set from minute, hour, day, week to month, quarter or year.

Why it matters:
Now you can visualize even the shortest tasks with precise start and end times - perfect for production lines, healthcare shifts, or logistics dashboards.

👉 See more in docs – durationUnit & lengthUnit

Custom Time Scales

Beyond fixed weeks or months, with registerScaleUnit helper you can define your own scale units to reflect how your team actually works. You're no longer limited to predefined timeframes and can fully adapt the timeline to your application requirements.

With the new autoScale option, you can decide whether the chart adapts automatically to your data or stays fixed - giving you full control over your timeline.

👉 See more in docs - Configuring time scale

A Smarter, More Interactive Task Grid

Managing a large number of tasks just got simpler. The upgraded task grid introduces:

Multi-column sorting
In-cell editing (text, date, dropdown, or custom editors)
Custom HTML rendering in cells
Header menu to show or hide columns on the fly

No need to open task edit form for every change - edit tasks inline and keep your workflow fast and fluid.

👉 See more in docs - How to configure task grid

Configurable Task Editor

The task editor has been refactored into a standalone, fully customizable component based on SVAR React Editor. This gives you more freedom to:

Choose between sidebar or modal layouts
Add field-level validation
Set up auto-save or manual-save modes

This separation makes it easier to customize the form or reuse it across different project views.

👉 See more in docs - How to configure task editor

Keyboard Shortcuts

End users can now navigate Gantt charts faster with hotkeys for common actions: copy, cut, paste, delete, open editor, and navigate through grid rows. This small change adds huge productivity gains during long planning sessions.

👉 See more in docs - Hotkeys support

UX Enhancements

SVAR React Gantt v2.3 introduces several polish updates:

Fullscreen mode for clean presentations
Resizable grid and chart areas with new expand/collapse control
Built-in localization support
Customizable tooltips on hover for task details

All these updates make the component feel smoother, more responsive, and ready for enterprise use.

Summing Up

SVAR React Gantt v2.3 combines modern React architecture with fine-grained scheduling and deep customization in one open-source package. Whether you're building a project planner, workforce scheduler, or resource management dashboard, this release gives you the tools to build faster and smarter.

Explore SVAR React Gantt v2.3:

🛠️ GitHub Repository
📚 Documentation
✨ Live Demos

💬 Have you used SVAR React Gantt or another timeline library in your React projects? Which features matter most to you in a Gantt component? Share your thoughts in the comments!

SVAR React DataGrid v2.3 — A Free Alternative for Complex React Tables

Olga T. — Thu, 16 Oct 2025 16:42:02 +0000

Working with tabular data in React might seem easy but can turn out to be a challenging task. You start with a simple feature list, but soon your app needs sorting, filtering, in-cell editing, accessibility compliance, not mentioning responsive layout and data export.

Of course, there are tons of data table libraries for React that give you most of these features. But they’re either heavy and expensive, or kind of limited in feature set.

That’s why we built SVAR React DataGrid, an open-source React datagrid component which is available under MIT license. With the recent v2.3 release, it now covers a feature set that makes it a strong competitor to the established players (AG Grid, MUI DataGrid, TanStack Table).

Key Features

Here’s what’s already built into SVAR React DataGrid (v2.3 and earlier):

React 19 and Typescript support: the essentials of modern React components
Accessibility: compatibility with WAI-ARIA standards
Performance: virtual scrolling for rows and columns, dynamic data loading - check the demo with big data
Data management: multi-column sorting, selection, editing (in-cell and via form)
Presentation: cell templates, cell tooltips, tree data, pagination.
Layout: pinned columns, colspans/rowspans, collapsible column groups, auto-sizing.
Backend/export: RestDataProvider integration, print API, CSV export.
Customization: light/dark themes, CSS variables, localization.

In other words: this is a powerful datagrid component with a solid feature set that can significantly save your development time. And what’s even better, it’s free under the MIT license - see the GitHub repository 🛠️

What’s new in v2.3

Here are the highlights of the new features added in version 2.3:

Accessibility (WAI-ARIA)
Screen reader support and upgraded keyboard navigation make SVAR React DataGrid usable with assistive tech, not just mouse clicks.

Filtering (Basic + Advanced)
Version 2.3 introduced column header filters (text, select, custom), as well as the ability to integrate SVAR React Filter for advanced filtering. You can use this query builder component to combine conditions with AND/OR logic and build complex queries with nested filter groups.

External Edit Form & Undo/Redo
Integration with SVAR React Editor allows you to edit rows data in a popup or sidebar edit form. You can undo/redo any data change with Ctrl+Z / Ctrl+Y since version 2.3, so no more fear of accidental edits.

Responsive Mode
SVAR React DataGrid v.2.3 gives you the flexibility to configure which columns appear and how the datagrid will look depending on screen size, so you can make sure your tables look good on any device.

Print Support
You can now print the entire datagrid, even off-screen rows/columns, with full control over paper size and orientation.

UX Improvements
Other notable new features include:

Drag-and-drop row reordering.
Custom HTML in headers/footers.
Smarter collapsible columns (with placeholders instead of disappearing).

👉 Try live demos of all features

Get Started

Starting with v2.3, the SVAR DataGrid package is available under the @svar-ui namespace:

npm install @svar-ui/react-grid

Here is the code example that adds a simple data table on a page with SVAR React DataGrid:

import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

const data = [
  {
    id: 1,
    city: "Amieshire",
    email: "Leora13@yahoo.com",
    firstName: "Ernest",
    lastName: "Schuppe",
    companyName: "Lebsack - Nicolas",
  },
  {
    id: 2,
    city: "Gust",
    email: "Mose_Gerhold51@yahoo.com",
    firstName: "Janis",
    lastName: "Vandervort",
    companyName: "Glover - Hermiston",
  },
];

const columns = [
  { id: "id", width: 50 },
  { id: "city", width: 100, header: "City", footer: "City" },
  { id: "firstName", header: "First Name", footer: "First Name", width: 150 },
  { id: "lastName", header: "Last Name", footer: "Last Name", width: 150 },
  { id: "email", header: "Email", footer: "Email" },
  { id: "companyName", header: "Company", footer: "Company" },
];

export default function App() {
  return <Grid data={data} columns={columns} />;
}

Explore more

Why Try SVAR DataGrid?

SVAR React DataGrid is designed to hit the sweet spot:

Modern React-first API
Super fast with virtual scrolling
Feature-complete (editing, filtering, export, responsive, accessibility)
MIT license

If you're building a project dashboard, admin panel, or any React app that works with structured data, SVAR React DataGrid v2.3 is worth a try. Explore the demos, experiment with the new features, and see how it can help you build advanced data tables faster.

🔍 SVAR React Filter: Open-Source Query Builder for React

Olga T. — Tue, 07 Oct 2025 16:28:50 +0000

If you're building a React app that works with large datasets, giving users an intuitive way to filter and find what they need is essential. Think of admin dashboards, CRMs, project management tools, or analytics panels where users have to analyze and interact with large volumes of data.

To simplify this task, we've created SVAR React Filter, a query builder for React that provides everything you need out of the box: a clear and intuitive filtering UI, AND/OR logic, nested filter groups, support for multiple data types, and a wide range of conditions.

What's Included

SVAR React Filter library includes three components:

FilterBuilder - an advanced logic builder for complex queries
FilterEditor - a standalone filter for a single field
FilterBar - a simple toolbar with inputs empowered by query-building logic

SVAR React Filter can be easily integrated into React projects, as it:

Works with React 18 and 19
Supports TypeScript
Produces and consumes JSON format
Is MIT-licensed - check out the repository on GitHub 🛠️

To try SVAR React Filter in action, see this demo with SVAR DataGrid.

Why SVAR React Filter?

SVAR React Filter comes with ready-to-use advanced logic of a query builder combined with a clean, modern user interface.

Filtering Logic

Build complex queries with multiple fields, grouped filters, and nested conditions
Combine rules using AND/OR logic for precise data filtering
Filter text, numbers, and dates with type-specific operations (equals, contains, greater than, begins with, etc.)

User Experience

Display filters vertically or horizontally to fit your layout
Load filter options dynamically as users create new filters
Localize text labels and date formats based on user locale
Choose between light and dark themes

Developer Experience

Get structured JSON output ready for backend processing
Transform filter queries to SQL using the included Go backend integration
Configure each filter type with a straightforward API

Get Started

You can install SVAR React Filter via npm:

npm install @svar-ui/react-filter
Here's a quick example to get you started with FilterBuilder using the light Willow theme:

import { FilterBuilder, Willow } from "@svar-ui/react-filter";
import "@svar-ui/react-filter/all.css";

const fields = [
{ id: "first_name", label: "First Name", type: "text" },
{ id: "age", label: "Age", type: "number" },
{ id: "start", label: "Start Date", type: "date", format: "%y-%m-%d" }
];

const options = {
first_name: ["Alex", "Adam", "John", "Jane"],
age: [17, 21, 35, 42],
start: [new Date(2025, 4, 7), new Date(2025, 4, 10)]
};

export default function App() {
return (
<Willow>
<FilterBuilder fields={fields} options={options} />
</Willow>
);
}

For detailed instructions, API references, and more examples see:

Wrapping Up

With SVAR React Filter, you can add advanced filtering to your React applications without building it from scratch. Whether you need a compact filter bar for a table or a full-featured query builder for complex dashboards, it provides the right level of flexibility.

Try it in your React project and see how much easier filtering can be. If you like it, a star on GitHub will be much appreciated! 🌟

🚀 Build Edit Forms in React Faster with SVAR Editor

Olga T. — Mon, 29 Sep 2025 17:17:14 +0000

Building edit forms for structured data is repetitive work. User profiles, admin panels, product details - they all need similar functionality: validation, layouts, save logic, and consistent UI. While libraries like React Hook Form handle form state beautifully, you still need to build all the UI components yourself.

In addition to its SVAR React Core library, SVAR released an open-source form editor component which simplifies the creation of editing forms for any UI element with structured data – SVAR React Editor.

This is an example of how the form built with SVAR Editor may look like, with various form inputs and comments section:

Whether you're handling user profiles, info cards, or any dataset with predefined fields, you can use SVAR Editor as a constructor to integrate all the form controls from the Core library. The component is free under MIT license, supports TypeScript and works seamlessly with React 18 and 19.

Key Features

With SVAR React Editor, you can build custom edit forms faster as it has pre-built blocks and components to handle form creation:

All SVAR React Core components can be used as form inputs (buttons, text input, selects, datepicker, combobox, etc)
Choose how the form appears on a page: inline, popup, or sidebar
Built-in validation, with support for custom validation rules
Collapsible sections for large forms
Two-column layout for a compact UI
Flexible saving options: real-time updates or manual saving via a button click
Menu and toolbar integration for better UX
Comments and to-do list sections can be added
Light and dark themes

Get Started

Here are the useful links to learn more about SVAR React Editor and see it in action:

To get started with the Editor component, you can install it via npm (note that you also need to install SVAR Core library to get access to all the form controls):

npm install @svar-ui/react-core
npm install @svar-ui/react-editor

Here is how you create a simple editor form with three input fields:

import { Willow } from '@svar-ui/react-core';
import { Editor } from '@svar-ui/react-editor';

const items = [
  { comp: "text", key: "name", label: "Name" },
  { comp: "text", key: "descr", label: "Description" },
  { comp: "text", key: "role", label: "Role" }
];

const values = {
  name: "John Doe",
  descr: "Lorem ipsum dolor sit amet",
  role: "admin"
};

export default function App() {
  return (
    <Willow>
      <Editor items={items} values={values} />
    </Willow>
  );
}

Building edit forms is really easy with SVAR Editor. The component comes with comprehensive documentation covering all configuration options, detailed API references, and practical examples for common use cases.

Summing Up

SVAR Editor is best when you need a complete UI solution quickly. Unlike headless form libraries like React Hook Form or Formik, it comes with pre-built form controls, layouts, and themes, making it perfect for quickly implementing admin panels, profile editors, and data entry interfaces.

The component also works well with the SVAR React ecosystem, including DataGrid and Gantt components.

Give it a try and share your feedback on GitHub!