SVAR Calendar 2.7 is out for React, Svelte, and Vue. The open-source edition adds a responsive layout that makes the calendar usable on phones, a more capable event editor, and the possibility to drag-in events from outside the calendar.

The PRO edition adds what enterprise-grade scheduling tools require: editable recurring events, timezone support, dynamic loading, and export to PDF, PNG & Excel.

All three framework versions share the same feature set and differ only in their framework-specific APIs.

Learn more about the SVAR Calendar and see the demos:

• SVAR React Calendar
• SVAR Svelte Calendar
• SVAR Vue Calendar

What’s New in Open-Source SVAR Calendar

All three framework versions of SVAR Calendar are available on GitHub: React, Svelte, and Vue. If you find the calendar useful, consider giving it a star 🌟

The open-source edition lets you add an interactive event calendar with drag-and-drop scheduling, multiple views, and a built-in event editor. Install the latest free versions via npm:

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

This is what we’ve added to the free edition of SVAR Calendar 2.7:

Responsive mobile support
On smaller screens the calendar switches to a compact layout: secondary toolbar controls collapse into an overflow menu, the view switcher becomes a compact list, and the event editor opens fullscreen.

A more capable event editor
Event descriptions now support rich text formatting, and users can attach files directly to events through the built-in editor.

Drag-in from outside
With the eventProjection prop, an item dragged from a list beside the calendar becomes an event, taking its start and end time (and the resource, in resource views) from the drop position. A live preview snaps to the nearest time slot, so users see where the event will land before releasing it.

Import from Excel
A free import wizard takes a spreadsheet, maps its columns to event fields, and returns validated events ready to render in the calendar. It ships as a separate open-source package you install next to the component.

More events in month rows
The eventOverflow option expands month rows and shows the extra events directly in the calendar instead of just grouping them behind a “+N more” indicator.

SVAR Calendar PRO 2.7

The PRO edition is where the calendar becomes a scheduling system for large datasets and real booking workflows:

Dynamic loading
The calendar fetches only the events for the visible date range and caches what it has already loaded, so navigating back to a month is instant. It works with the existing RestDataProvider helper, which adds the date-range parameters to the request.

Editable recurring events
In SVAR Calendar PRO 2.7, recurring events are no longer read-only. Users edit an entire series or a single occurrence in the built-in editor, with no RRULE strings written by hand.

Timezone support
SVAR Calendar PRO 2.7 can display events in any IANA time zone and switch the displayed timezone at runtime without modifying the stored data. This helps distributed teams coordinate schedules across offices and view events in their local time.

Resource view upgrades
One event can belong to several resources at once: a meeting with two hosts, a shift covering two rooms. The Resource view can also nest dates and resources into a single axis in either order, switchable from the toolbar.

Undo/redo support
SVAR Calendar PRO now supports undo/redo for event changes. The history tracks additions, edits, moves, and deletions, allowing users to revert or restore their actions.

Export to PDF, PNG, and Excel
A single export-data call snapshots the current view with your custom event content and styling preserved.

Wrapping Up

SVAR Calendar 2.7 brings responsive layouts, a richer event editor, external drag-and-drop, and Excel import to the open-source edition. The PRO edition adds more advanced scheduling capabilities, including editable recurring events, timezone support, dynamic loading, resource management improvements, undo/redo, and export.

Start with the open-source edition of SVAR Calendar and explore PRO when your application needs more advanced scheduling features. A 30-day free trial is available:

• React Calendar PRO
• Svelte Calendar PRO
• Vue Calendar PRO

To learn more about the new features, read the full SVAR Calendar 2.7 release post.

SVAR Gantt 2.8 is out for React, Svelte, and Vue, and this is the biggest update to the component’s scheduling logic so far. Until now, auto-scheduling only supported Finish-to-Start links, while everything else had to be kept in sync by the person using the chart.

Version 2.8 upgrades the scheduling engine of SVAR Gantt PRO so it can handle more of the planning work directly in the chart. This brings scheduling behaviour closer to what project managers expect from tools like MS Project: all four dependencies, constraints, deadlines, and resource calendars work together in one scheduling model.

The open-source edition of SVAR Gantt also receives three updates: inclusive end dates, dragging tasks in from your own list, and real-time updates for multi-user collaboration.

Learn more about the framework-native SVAR Gantt libraries, see demos and find comprehensive docs here:

• SVAR React Gantt
• SVAR Svelte Gantt
• SVAR Vue Gantt

What’s New in Open-Source SVAR Gantt

All three framework versions of SVAR Gantt have been updated on GitHub: React, Svelte, and Vue. The open-source edition allows you to add an interactive Gantt chart and display tasks and dependencies on the customizable timeline. Tasks can be dragged on the timeline or edited via the built-in form.

If you find the Gantt chart component useful for your application, give a star to support the project 🌟 It will be much appreciated.

You can install the latest free versions of SVAR Gantt from npm:

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

This is what we’ve added to the free Gantt chart component:

Inclusive end dates
By default, a task ending on Friday is stored as Saturday 00:00, which is how the data works but not how people talk. The new inclusiveEnd property renders a five-day task that starts on Monday as “Monday to Friday”.

Drag tasks from outside
A list of tasks can be dropped straight onto the chart. The task lands next to the task it was dropped on, or inside it when that task is a summary, so a backlog becomes a plan without retyping tasks or rebuilding links.

Real-time updates from the server
Several people can edit the same project and see each other’s changes live. If the connection drops, the event stream reconnects on its own and signals that the data should be reloaded, so a session survives a flaky network.

Why Auto-Scheduling Matters

Auto-scheduling turns a Gantt chart from a visual layer to a complete planning tool. When a task’s start, end, or duration changes, the scheduling engine shifts the dependent tasks itself, so the schedule stays valid without manual edits.

For a ready-to-use Gantt chart library, this matters because scheduling logic is hard to build correctly: one change can affect many tasks through dependencies, constraints, calendars, and deadlines. In SVAR Gantt PRO 2.8, the component handles this work for you.

SVAR Gantt PRO 2.8: The Upgraded Scheduling Engine

This release brings the scheduling capabilities teams expect from enterprise planning tools into the component itself:

Auto-scheduling across all four dependency types
FS/SS/FF/SF dependencies are now supported, with lag available on any link type, and all four now affect dates, slack, and the critical path.

Six scheduling constraints, with conflict reporting
Version 2.8 adds the support for the following constraints: “start no earlier than”, “start no later than”, “must start on”, “finish no earlier than”, “finish no later than”, and “must finish on”. When a date cannot be met, the chart names the task and the blocker and offers one-click fixes: reschedule the task, move it, remove the constraint, or remove the link.

Manual and inactive tasks
Manual tasks are locked in place: auto-scheduling never moves them, while users can still drag them by hand. Inactive tasks cover cancelled or on-hold work: they stay visible on the chart but drop out of scheduling.

Deadlines
A deadline is a target finish date shown as a flag on the chart. When a task runs late, the flag turns into a warning, so overdue work is visible straight away.

Faster auto-scheduling
With this update, auto-scheduling, critical path, and bulk updates in SVAR Gantt PRO run much faster, and large linked projects stay smooth to drag and edit, even with 100,000 tasks. See the demo →

Resource-driven scheduling
Task dates are calculated from the task calendar together with the working calendars of the assigned people, including their days off and part-time schedules.

Resource histogram
The histogram turns the resource load chart into a capacity view where over-allocated people and periods are visible at a glance.

Drag-and-drop resource assignment
Assignees can be dragged onto tasks from a list or from the resource load view, and tasks can be moved between resource groups to reassign them.

Progress line and S-curve
Version 2.8 adds two visual features for project tracking. The progress line compares each task’s reported progress against a status date. The S-curve draws scheduled, earned, and baseline progress as cumulative curves over the timeline.

UX and export improvements
This update also introduces an additional grid panel to the right of the timeline, a placeholder row that simplifies adding a new task, and the ability to export resources and assignments in exports to PDF, PNG, and Excel, as well as MS Project import/export.

Wrapping Up

SVAR Gantt 2.8 is the release where the component starts planning instead of displaying: it handles complex dependencies, processes constraints, reports conflicts, and calculates task dates using resource calendars that reflect how people actually work.

Auto-scheduling and the critical path now support all four link types and remain smooth even with thousands of tasks. With these capabilities, SVAR Gantt PRO is ready for enterprise applications.

The free MIT-licensed core keeps a complete Gantt chart: tasks, dependencies, drag-and-drop, editor, filtering, backend integration, now with real-time updates and UI improvements.

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

To learn more about the new features:

• 📚 Read the full release post
• 👀 See the demos
• 📖 Check the docs
• ⭐ GitHub

Start building project planning apps with SVAR Gantt today.

SVAR Gantt 2.8 for React, Svelte and Vue: Scheduling Engine Upgraded was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Choosing a JavaScript framework used to be a simple decision. For nearly a decade, React was considered a default for web application development.

That landscape looks noticeably different today. While React remains the market leader, the engineering landscape has shifted. Out of the dozens of alternative UI libraries that emerged over the last decade, Vue and Svelte are the ones that truly stood the test of time and won the trust and love of developers.

In this article, we’ll dive deep into React, Vue, and Svelte to compare their developer experience, ecosystem maturity, performance, and how well they integrate with modern AI coding toolchains.

The Most Popular JavaScript Frameworks in 2026

The numbers show that React dominates raw adoption, Vue maintains a strong middle position, and Svelte commands unmatched enthusiasm among developers.

Estimated monthly NPM downloads as of August 2026:

• React: ~642M
• Vue: ~56M
• Svelte: ~22M

Here are some stats from npm Trends:

The State of JavaScript 2025 survey data highlights key trends across ecosystem usage and developer perception:

• React: Roughly 85% of survey respondents actively use React.
• Vue.js: Vue holds second place in global usage at approximately 52%, a position it has maintained since overtaking Angular.
• Svelte: Around 27% of developers report using Svelte. However, it leads the industry in positive sentiment, ranking first in Developer Interest (63%) and overall Positivity (71%), while holding second place in user Satisfaction.

The numbers show that React is the undisputed industry standard. Vue provides an accessible, stable alternative with widespread global adoption. Svelte operates as a fast-growing challenger, loved by engineers.

React vs Vue vs Svelte: Which One Should You Choose?

When evaluating a framework for a production application, engineering teams must weigh practical trade-offs in learning curves, runtime performance, ecosystem breadth, and AI tool support. Let’s examine how React, Vue, and Svelte stack up across these critical areas.

Learning Curve and Developer Ergonomics

The initial speed at which an engineering team can write maintainable code varies considerably across all three options.

React relies on JSX and a functional component paradigm. React is a UI library rather than a full framework; it leaves routing, complex state management, and form handling to third-party decisions. Managing state requires hooks like useState or specialized state management stores like Redux, Zustand, and more. This design requires teams to establish strict architectural guidelines to keep code bases maintainable over time.

Vue uses Single File Components (.vue files), combining HTML templates, JavaScript logic, and scoped CSS into a single document. Developers transitioning from standard web development usually find this structure intuitive. Two-way data binding via v-model eliminates repetitive state handling code, making form-heavy applications fast to build.

Svelte takes simplicity further by staying as close to vanilla HTML, CSS, and JavaScript as possible. In Svelte 5, reactivity is managed through explicit primitives called Runes, such as $state() and $derived(). Variables act like standard JavaScript values, avoiding complex state setters or explicit dependency arrays.

Performance and Bundle Size Realities

React ships a shared virtual DOM runtime that must be loaded by the browser. Unoptimized React applications can see bundle sizes exceed 400 KB before accounting for custom business logic. Historically, keeping React applications performant required manual optimization. The release of the React Compiler in React 19 automates component memoization at build time, reducing unnecessary re-renders without manual code interventions.

Vue historically relied on a virtual DOM reconciliation process similar to React. However, Vue introduced Vapor Mode, an opt-in compilation strategy that bypasses the virtual DOM entirely to target direct DOM updates. This brings Vue’s execution speed into the same range as Svelte while preserving Vue’s existing developer experience.

Svelte compiles components into direct DOM manipulation instructions at build time. Because it ships without a virtual DOM runtime, initial JavaScript bundle sizes remain minimal. In production tests, equivalent applications built in Svelte frequently ship bundle sizes under 35 KB gzipped, making it an excellent choice for mobile-first software or environments with bandwidth limitations.

Ecosystem Maturity and Tooling

React possesses the largest ecosystem. Whether a project requires high-performance virtualized tables, accessible component primitives, or complex chart engines, multiple mature packages exist for almost every requirement.

Vue, rather than forcing developers to evaluate dozens of third-party options, provides official solutions for routing (Vue Router) and state management (Pinia), alongside deeply integrated ecosystem standards like Nuxt for full-stack rendering and Vite for build tooling.

Svelte includes built-in solutions for CSS scoping, UI transitions, animations, and basic state management. This out-of-the-box feature set reduces third-party dependency creep. However, Svelte’s total ecosystem remains considerably smaller than React’s or Vue’s.

AI Coding Support and AI Toolchain Integration

React holds a distinct advantage in AI-driven workflows:

• Training Data Volume: React powers roughly 30 million public projects. Large language models generate React code with higher accuracy, fewer hallucinated APIs, and better handling of complex edge cases.
• Dedicated AI Platforms: Popular prompt-to-UI platforms like v0 and Lovable generate React code by default. Specialized AI user interface kits, such as assistant-ui for building chat interfaces and the Vercel AI SDK, target React as their primary integration surface.

Vue and Svelte are taking active steps to bridge this gap:

• Svelte’s AI Push: Svelte’s maintainers introduced the Svelte Model Context Protocol (MCP) tool. This integration feeds framework-specific guidelines directly to AI agents, helping models understand Svelte 5’s Runes syntax accurately.
• Vue’s Ecosystem Positioning: While multi-framework environments like Bolt.new support Vue, there are currently fewer dedicated prompt-to-app code generation engines built specifically around Vue. However, Vue’s consistent API patterns make it relatively easy for general-purpose AI assistants to write reliable code once supplied with proper context.

React vs Vue vs Svelte: When to Use Each One

Frameworks’ technical characteristics, ecosystem realities, and AI tooling directly influence which option fits a given scenario. Here is a breakdown of the ideal use cases for each framework:

Best Use Cases for React:

• Enterprise SaaS platforms requiring deep long-term ecosystem stability and easy developer recruitment.
• Teams that rely heavily on AI generation platforms (v0, Lovable, Cursor) and specialized AI chat interfaces.
• Cross-platform web and mobile applications leveraging React Native shared patterns.

Best Use Cases for Vue:

• Mid-sized SaaS applications looking to balance development speed with clean maintainability.
• Projects requiring rapid team onboarding across developers with varying experience levels.
• Applications where official, cohesive core tooling (routing, state management) is preferred over custom setup decisions.

Best Use Cases for Svelte:

• Performance-critical web applications where minimal bundle size directly affects user conversion.
• Mobile-first web software targeting users on slow network connections.
• Product teams looking for high developer velocity with minimal framework boilerplate.

How SVAR Contributes to Each Ecosystem

No matter which framework you use, you might eventually need UI components for complex features like scheduling, data grids, or file management, unless you choose to build them from scratch.

SVAR UI provides enterprise-grade UI components built natively in all three frameworks: React, Vue, and Svelte.

It gives developers ready-to-use building blocks for task management, scheduling, data presentation, or file navigation — including Gantt chart, calendar, kanban board, data grid, and file manager. All components come with a free MIT-licensed core, full TypeScript support, and advanced features in the PRO tier.

Conclusion: Choosing the Best JavaScript Framework in 2026

In 2026, there is no single “best framework.” Selecting a modern JS framework is a strategic evaluation of ecosystem depth, hiring availability, team velocity, and long-term maintenance costs rather than raw performance benchmarks.

For most real-world applications, minor Svelte vs React vs Vue performance differences matter far less than development speed and support overhead. The general paradigm remains clear: React for enterprise scale, Vue for rapid productivity, and Svelte for ease of use and peak performance.

Ultimately, among the best JS frameworks available today, your choice in React vs Svelte vs Vue should reflect your team’s constraints, hiring pipeline, and long-term business goals.

This article was initially published on the SVAR blog — read the full React vs Vue vs Svelte comparison with detailed tables and additional insights.

React vs Vue vs Svelte for Modern Web Apps in 2026 was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

For many developers looking for a JavaScript-based calendar component, the first name that comes to mind is FullCalendar. Its flexible architecture, mature plugin ecosystem, rich feature set, and years of production use have made it one of the most trusted scheduling libraries — and for many teams, the default choice.

But frontend development has changed significantly over the past few years. Modern applications are increasingly built with React, Vue, and Svelte — see the State of JS 2025 statistics.

For complex, data-intensive components like calendars, teams are moving away from framework-agnostic JavaScript libraries that rely on framework adapters. Instead, they are looking for components built specifically for their framework, with TypeScript-first APIs, predictable state management, minimal integration overhead, and an API that feels like a natural part of their application.

This raises a practical question: Is FullCalendar still the best fit for modern frontend development? And are there compelling alternatives worth considering?

Why Another Calendar?

At first glance, building another calendar library may seem like reinventing the wheel.

FullCalendar is a mature, well-maintained project used in thousands of production applications. It already solves most scheduling challenges and offers a rich ecosystem of plugins and extensions.

At the same time, expectations for calendar components have evolved. Developers need components that add real scheduling workflows without too much manual wiring. They expect the calendar library to have scheduling features out of the box, such as:

• Drag-and-drop scheduling
• Multiple calendar views
• Built-in event editing without creating custom forms or dialogs
• Recurring events support
• Event filtering
• Resource scheduling
• Straightforward UI customization
• Full TypeScript support

These capabilities, usually found in online schedulers like Google Calendar, have become the baseline for modern scheduling components. The real question is no longer whether a calendar library supports these features, but how it delivers them. That is where the differences between modern solutions begin to emerge.

Where FullCalendar Is Still Strong

FullCalendar remains one of the most established and well-recognized calendar libraries in the JavaScript ecosystem. The project continues to evolve through its open-source repository on GitHub. Its key strengths include:

• More than a decade of development
• A large and active community
• Extensive documentation and learning resources
• Vue, React, and Angular support through framework wrappers
• Wide adoption across real-world applications

FullCalendar supports multiple calendar views, drag-and-drop interactions, recurring events, and provides a solid foundation for production scheduling applications. Its core is available under the MIT license, while more advanced capabilities are offered as commercial extensions.

At the same time, newer libraries are taking a different approach — one that combines the core scheduling capabilities with a more modern developer experience.

SVAR Calendar as Alternative

SVAR Calendar is one of these alternatives. It delivers similar scheduling functionality required for modern applications. However, rather than adapting a framework-agnostic JavaScript library through wrappers, SVAR Calendar is built as a native component for React, Vue, and Svelte.

As a newer open-source project, SVAR Calendar is actively evolving and maintained on SVAR’s GitHub. It focuses on a modern developer experience with framework-native architecture, modern calendar UX patterns, and built-in workflows for common business scenarios.

Different Design Philosophies

FullCalendar and SVAR Calendar have a lot in common. Both offer an MIT-licensed core, with more advanced scheduling capabilities available in their commercial editions.

Free versions cover the core calendar functionality developers expect: day, week, and month views, drag-and-drop scheduling, and TypeScript support. The differences become more visible when it comes to complete scheduling workflows.

With FullCalendar, event editing typically requires developers to build their own UI. Event filtering and calendar grouping also require custom implementation. More advanced capabilities, such as resource scheduling and timeline views, are available through premium features.

SVAR Calendar takes a more built-in approach. It includes an event editor, advanced event filtering, and calendar grouping as part of the component. Recurring events, resource scheduling, and timeline views are also available in the PRO edition.

What it means in practice:

• SVAR Calendar includes more of the common business workflows directly in the component.
• FullCalendar often relies on additional plugins or custom implementation.

Calendar Engine vs Complete Scheduling System

FullCalendar is primarily a calendar engine. It provides an extensible foundation that developers can customize through plugins, callbacks, and custom UI. This offers a high degree of flexibility, but common business workflows may require additional implementation.

SVAR Calendar takes a more all-in-one approach. It provides a calendar component together with built-in workflows such as event editing, filtering, and calendar grouping, reducing the amount of custom infrastructure required for common scheduling scenarios.

What it means in practice:

• FullCalendar provides a powerful scheduling engine, but common business workflows often require additional plugins or custom implementation.
• SVAR Calendar is better suited for business applications that need common scheduling workflows available out of the box, with less integration overhead.

UI Customization

The two libraries also differ in how they approach UI customization.

FullCalendar emphasizes flexibility through its plugin architecture, rendering hooks, and callback APIs. This gives developers fine-grained control over the user interface and makes it possible to build highly customized scheduling experiences.

SVAR Calendar takes a more opinionated approach, aiming to reduce the amount of infrastructure developers need to build themselves. It relies on themes, CSS variables, and predictable component APIs, allowing most UI customizations to be implemented without deep overrides or custom rendering logic.

What it means in practice:

• FullCalendar prioritizes flexibility, giving developers complete control at the cost of additional complexity and implementation time.
• SVAR Calendar focuses on faster implementation by providing common scheduling workflows and UI customization mechanisms out of the box.

JavaScript Library vs Framework-Native Components

One of the biggest architectural differences appears during integration.

FullCalendar is built around a framework-agnostic JavaScript core with adapters for Vue, React, and Angular. These adapters work reliably, but they introduce an additional integration layer that requires more configuration and state synchronization as applications become more complex.

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
const events = [
{ title: "Kickoff", date: "2026–07–01" },
];
export default function App() {
return (
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
events={events}
/>
);
}

SVAR Calendar, by contrast, is implemented as a native Vue, React, and Svelte component. Each version is built specifically for its framework, following its rendering model, component lifecycle, and state management patterns.

import { useRef } from "react";
import { Calendar, Editor, Willow } from "@svar-ui/react-calendar";
const date = new Date(2026, 4, 5);
const events = [
{
id: 1,
start: new Date(2026, 4, 5, 9, 0),
end: new Date(2026, 4, 5, 10, 0),
text: "Standup",
},
];
export default function App() {
const api = useRef(null);
return (
<Willow>
<Calendar ref={api} events={events} date={date} />
{api.current && <Editor api={api.current} />}
</Willow>
);
}

As a result, the calendar integrates naturally with the application and requires less integration overhead.

What it means in practice:

• With FullCalendar, you’re integrating an external JavaScript library through a framework adapter.
• With SVAR Calendar, you’re working with a component built specifically for Vue, React, or Svelte that behaves like any other native component in your application.

Conclusion: Which Calendar Component Should You Choose?

Both FullCalendar and SVAR Calendar are powerful scheduling libraries, but they’re designed with different development priorities in mind, and the right choice depends on the needs of your project.

FullCalendar is suitable when:

• You value a rich plugin ecosystem and a mature community.
• You need maximum customization flexibility.
• You want to use a vanilla JavaScript component.
• You need Angular support.
• You already have an existing integration centered around FullCalendar.

SVAR Calendar is suitable when:

• You are developing your application with Vue, React, or Svelte.
• You want to use a framework-native component.
• You value a built-in scheduling workflow, predictable integration, and minimal custom implementation.
• You want to use features such as event editing, filtering, calendar grouping, and resource scheduling with minimal additional implementation.

Explore the SVAR calendar component for your preferred framework:

Vue Calendar | React Calendar | Svelte Calendar

⭐ The open-source edition is available on GitHub, so please give it a star if you like it! Try SVAR Calendar in your projects and save time instead of building an event calendar from scratch.

Kanban boards are a simple idea with a very broad use case: they help you visualize task flow as it moves from one stage to another. You’ll find them in project management tools, bug trackers, sales pipelines, agile project planners, and internal admin dashboards — basically any app where items need to flow through a process.

If you’re building such a task board in React, you’ll probably need to integrate drag-and-drop, editing, filtering, sorting, grouping, and keep your app in control. That’s where SVAR Kanban can save your time.

SVAR Kanban is an open-source, framework-native, task board component available in React, Svelte and Vue versions. It gives you a working Kanban board quickly, while still leaving the important parts — state, actions, and backend integration — in your hands.

⭐ Find SVAR Kanban on the GitHub and give it a star, if you find it useful:

• React Kanban
• Svelte Kanban
• Vue Kanban

What you get out of the box

SVAR Kanban covers the key features of a task board that you might find in a task management software:

Columns and cards with drag-and-drop: Cards can move between columns or be reordered inside one column, and every drag dispatches a move-card action your app can observe, validate, or cancel.

Flexible column layout: Columns can scroll independently or share one board-wide scroll. You can keep widths fixed or let them adapt to the available space, as well as define a cards limit within a column.

Card customization: Cards can show priority, tags, progress, deadlines, avatars, cover images, comments, attachments, and more. If needed, you can replace the entire card body with a custom component.

Built-in task editing: The editor can open as a sidebar, modal, or inline form, so users can quickly edit task details. Custom fields can be added.

Card menu: Users can edit, duplicate, and delete cards from the built-in menu, and you can add custom actions when needed.

Filtering, sorting, and grouping: The board supports predicate-based filters and comparator-based sorting. You can also regroup the cards by stage, assignee or priority and show them in corresponding columns.

Theming and localization: You can use ready-made light or dark themes and localize labels and date formats.

Performance options: Virtualization keeps large boards responsive when you’re dealing with a lot of cards or columns.

See the demos and get started with detailed docs here:

• React Kanban
• Svelte Kanban
• Vue Kanban

Add a kanban board to a page

Getting started with SVAR Kanban is straightforward. Install the package for your framework, React, Svelte or Vue:

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

Then define columns and cards, and render the board inside the Willow wrapper for a light theme. Here is a basic example for SVAR React Kanban:

import { Kanban, Willow } from "@svar-ui/react-kanban";

const columns = [
  { id: "backlog", label: "Backlog" },
  { id: "progress", label: "In Progress" },
  { id: "done", label: "Done" },
];

const cards = [
  { id: 1, label: "Fix login bug", column: "backlog", priority: 2 },
  { id: 2, label: "Write tests", column: "progress", priority: 1 },
];

function App() {
  return (
    <Willow>
      <Kanban cards={cards} columns={columns} />
    </Willow>
  );
}

The Willow wrapper is required because it injects the CSS variables the board uses for styling. Without it, the component won’t render correctly. Each card needs an id and a column value that matches one of your column IDs, while the rest of the card shape stays flexible for your own data.

Working with cards

The board is designed around common workflow actions, so you can create, update, move, duplicate, and delete cards through the API rather than mutating the source array directly. That makes it easier to keep the UI, store, and backend in sync.

If you want to add an editor, you can capture the board API with init and mount the Editor next to the board.

import { useState } from "react";
import { Kanban, Editor, Willow } from "@svar-ui/react-kanban";

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

  return (
    <Willow>
      <Kanban init={setApi} cards={cards} columns={columns} />
      {api && <Editor api={api} />
      }
    </Willow>
  );
}

Once the editor is mounted, clicking a card opens it for editing automatically, and updates flow back through the board’s action system.

Why it works well in real apps

SVAR Kanban is a good fit when your app needs a board, but you do not want the board to take over the app. The API gives you freedom for intercepting actions, observing changes, and connecting to a backend through a REST data provider when you need persistence.

It also scales better than just a basic demo component. Virtualization helps keep scrolling smooth, and the layout options make it easier to adapt the board to different workflows instead of forcing every team into the same structure.

In addition to the free version, there is PRO edition that adds extras for enterprise-grade scenarios and larger apps, like undo/redo support, export to PDF/PNG/XLSX, and dynamic column loading for larger boards.

Wrapping up

If you’re building a Kanban-style app in React, Svelte or Vue, SVAR Kanban gives you a practical starting point: open-source at the core, easy to integrate, and flexible enough for real workflows. It handles the boring infrastructure so you can focus on the product logic around it.

SVAR Kanban demos: React • Svelte • Vue

Get started: React • Svelte • Vue

Before you go

• Please take a moment to like the post and follow the writer!
• Did you know that over 400,000 developers share what they’re building, learning, and discovering across our platforms every month? Learn how you can contribute here

SVAR Kanban: an open-source React task board for workflow management was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

SVAR Gantt 2.7 brings resource planning to the PRO edition, making it easier to assign work, balance workloads, and manage project capacity directly inside the Gantt chart. For teams building project scheduling tools in React, Svelte, or Vue, this release adds more advanced flexibility and performance right out of the box.

The open-source version of SVAR Gantt has also been updated with virtualized Gantt scales, a smarter task editor, and improved tooltips. Together, these updates give teams the tools they need to build modern project scheduling interfaces with better performance and more control.

Learn more about the framework-native SVAR Gantt libraries:

• SVAR React Gantt
• SVAR Svelte Gantt
• SVAR Vue Gantt

Open-Source Gantt Chart with Better Performance

All three framework editions — Svelte, React, and Vue — have been updated on GitHub. If you find the Gantt chart component useful, give a star to support the project 🌟

You can install the latest free versions of SVAR Gantt from npm:

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

This is what we’ve added to the free Gantt chart component:

• Virtual Scale Rendering — now only visible time-unit cells are rendered on the scale. This means that users can create long and detailed timelines without running into performance issues. For example, you can build a multi-year chart with “hour” as the lowest unit and scroll or zoom it smoothly with no lag.
• Updated Tooltips — tooltips now support delay, position, arrow, touch behavior, and custom content. You can attach tooltips for task bars, rollups, links and resource-load cells, showing detailed, context-specific information directly on the chart.
• Import from Excel / CSV — a new ExcelImport widget for Excel / CSV import converts spreadsheet data into Gantt-ready JSON. The widget opens a wizard where users upload a file and map its columns to task or link fields. It supports auto-detection, data validation, optional ID generation, and localization, making it easy to bring existing project data into Gantt.

SVAR Gantt PRO for Resource Planning

This release brings full resource-management capabilities to SVAR Gantt PRO. It introduces a set of major enhancements that let teams assign tasks and balance workloads directly inside the component:

• Ability to assign resources to tasks — you can now manage resources and assignments collections to show who is responsible for each task. Resources may be flat or hierarchical, and assignments link each resource to a task with optional allocation units.
• Auto calculate and visualize resource load — You can now visualize resource load in the Gantt chart to see how each team member is allocated across the project timeline. Resource load can be displayed in hours (default) or as a percentage, and you can customize the output using a template function.
• Individual calendars for tasks and resources — assign task calendars through the calendars prop. A task’s calendar controls its working-time rules and how the task is scheduled and displayed. Also, each resource can have its own work-time calendar.
• Task grouping — Tasks can now be grouped by any field or by assigned resource, allowing users to explore the project by priority, status, or team. Grouping supports optional task and resource hierarchies and provides flexible handling for ungrouped tasks.
• Automatic WBS codes — SVAR Gantt PRO now supports automatic WBS (Work Breakdown Structure) numbering, assigning each task a hierarchical code based on its position in the task tree (e.g., 1, 1.2, 1.2.1). WBS codes update automatically whenever tasks are added, moved, indented, or reordered.
• Improved Editor UI — the task editor has been reorganized into focused tabs — General, Links, Resources, and Segments — so each aspect of a task can be edited without distraction. We also improved editing of split tasks.
• Improvements in Gantt scheduling engine — We have enhanced Gantt auto scheduling engine to work with summary tasks, which results in better performance and atomic scheduling operations that can be reverted with one step.

Summing Up

SVAR Gantt 2.7 makes it easier to build modern project planning and scheduling tools with better performance, resource management, and more flexible task organization. With support for resource allocation, resource load visualization, individual calendars, task grouping, and automatic WBS codes, the PRO edition gives you the building blocks for project and task scheduling apps.

To learn more about new features:

• See the demos
• Check the docs
• Fork SVAR Gantt on GitHub

Start with the free open-source edition and upgrade to PRO when your project needs advanced resource planning and scheduling features.

But what happens when we actually start looking for a scheduling tool that fits our project or internal system?

Pretty quickly, the real challenge shows up: most ready-to-use calendar libraries sit at opposite ends of the spectrum. On one side, you have lightweight tools that cover the basics but stop there. On the other, enterprise-grade solutions that are packed with advanced features — along with the complexity, weight, and higher cost that follows.

Filling the Space Between “Too Basic” and “Too Complex”

SVAR Calendar was created to bridge this gap. It’s a free, open-source event calendar for Svelte, React, and Vue, built on a fast MIT-licensed core that gives you the flexibility to add Day, Week or Month views, show group of calendars, integrate drag-and-drop event editing, and manage data handling around your workflow.

Need advanced functionality for a more sophisticated scheduling system? The PRO edition offers additional views (Year, Agenda, Timeline, Resources) and recurring events support on top of the free core.

👉 Try the live demo to see check calendar’s look and feel.

🛠️ Find the free version of all three SVAR calendar components on GitHub.

Truly Native by Design — Built for React, Svelte & Vue

One of the strengths of SVAR Calendar is that it isn’t just a wrapper around popular frontend frameworks — it’s built natively for React, Svelte, and Vue, with full TypeScript support across all three. As a result, the component integrates cleanly into your app without the extra adjustments that wrapper-based solutions usually require.

You can explore each version here:

• React Calendar
• Svelte Calendar
• Vue Calendar

You can install SVAR Calendar by adding the package for your framework:

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

Now, let’s go a bit further and take a quick look at what SVAR Calendar brings to your workflow.

Free Version for Solid Event Scheduling

The open-source edition includes everything needed for a user-friendly scheduling interfaces found in iOS or Google calendars.

Day, Week, and Month views — three built-in layouts for daily, weekly, and monthly scheduling.

Drag-and-drop interactions — move, resize, and create events with a natural drag-to-create gesture. Just like the interactions you’re used to in iOS or Google Calendar.

Event editing tools — use a built-in editor (sidebar or modal) plus a customizable right-click context menu.

Calendar groups — organize events by category (Work, Personal, Holidays, etc.) and toggle calendars on or off with simple sidebar checkboxes.

Filtering — filter events by calendar group, search text, or combine multiple conditions using the SVAR Filter engine.

iCal import and export — load .ics files or export events for syncing and sharing.

Theming and localization — customize styling and adapt labels and date formats to any language.

Backend integration — connect to any REST API with automatic data loading and CRUD syncing.

A Quick Svelte Example

If you want to try the component immediately, just drop this snippet into your Svelte project. You’ll get a working weekly planner with color-coded groups, sample events, a sidebar for switching calendars, and a built-in editor for quick updates.

<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} />

And if you’re using React or Vue? The structure is almost identical — same API, same logic, just written with framework-native syntax.

PRO Edition: Additional Views and Recurring Events

For teams that need more than the basics, the PRO edition adds several powerful views and features:

• Year View — see all twelve months at once in a 3×4 grid with marked busy days, a highlighted today, and event previews on hover.
• Agenda View — browse a chronological list of upcoming events grouped by day, perfect for quick scanning and mobile-friendly layouts.
• Resources View — view a single day split into columns for rooms, people, or equipment to instantly see who or what is booked.
• Timeline View — explore a horizontal, single-day layout with each resource as a row and events shown as time-length bars for easy comparison.
• Recurring Events — create repeating schedules with full control over series updates, single-occurrence edits, and forward-only changes.

To explore what the PRO edition can do, you can start a 30-day trial and browse the pricing for your preferred framework: React • Svelte • Vue

Getting started with SVAR Calendar

SVAR Calendar is ready to plug into your project right now. The open-source core is live, the demos are up, and the full documentation for Svelte, React, and Vue is already in place — no waiting, just start building. If you want to dive in, all the essentials are only a click away:

• Quick Start guides for React • Svelte • Vue
• Live demos for React • Svelte • Vue
• GitHub repositories with the full MIT-licensed source. If SVAR Calendar saves you time, a GitHub star helps other developers find it ⭐

Whether you’re adding a lightweight weekly planner or assembling a full resource-booking system, the free edition takes you impressively far — and the PRO edition picks up exactly where you need more power.

SVAR Calendar: Add a Clean Event Calendar UI into React, Svelte & Vue Apps was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 written entirely in Vue 3, MIT-licensed, 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, dynamic loading)
• 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

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 SVAR Vue DataGrid

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

• GitHub — we’d really appreciate your stars if you like the component ⭐
• Live demos
• Getting started guide

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.

If you’re building web apps with Vue.js, we have a new open-source library of Vue 3 UI components waiting for you to try! SVAR Vue offers a set of pre-built, TypeScript-ready, beautifully styled 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. The key idea is simple: components are written specifically for each framework, without wrappers or adapters. You work with native Vue components and patterns.

Today we’re releasing three packages for Vue 3:

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

All three are free to use under the MIT license and available on SVAR GitHub 🛠️

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, 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, ideal for admin dashboards
• 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’s Coming Next

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

• Vue DataGrid — high-performance data grid with sorting, filtering, and in-cell editing
• 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 see how SVAR Vue library fits your workflow!

The idea behind SVAR UI has always been simple: the best component library is the one that lets you ship using the code you already know.

Happy coding!

Here’s what’s new:

Filter 2.5 with Search Bar That Speaks Users’ Language

The standout feature of this release is the new FilterQuery component of SVAR React Filter library. It is a YouTrack-style search component that processes three types of queries:

• Structured syntax: status:open assignee:Sarah priority:>3
• Natural language: “show me Sarah’s open high-priority items”
• Mixed mode: combine both in one input

Instead of forcing users through nested dropdown menus, FilterQuery provides a single text input that intelligently interprets what they’re looking for. It converts queries into parsed filter configurations, supports keyboard operations, syntax highlighting, and autocomplete.

👉 Check out the demos to see how FilterQuery works.

Why FilterQuery Matters

• Single input field, unlimited filtering power: structured, conversational, or both
• Full visibility: every filter renders as human-readable query syntax
• Inline editing: users can modify queries as text without rebuilding from scratch
• No backend required: structured and mixed modes can operate entirely client-side
• LLM-agnostic: works with OpenAI, Anthropic, or your custom endpoint
• Universal use: use it with DataGrid, Gantt, or any React app that needs filtering

Getting Started

SVAR React Filter is available on GitHub and can be installed via npm.

npm install @svar-ui/react-filter

DataGrid 2.6: Custom Editors & Natural Language Filtering

SVAR React DataGrid v2.6 now supports natural language filtering (via FilterQuery integration) and gives you complete control over custom in-cell editors.

FilterQuery Integration

DataGrid now works seamlessly with the new FilterQuery component. Users can filter large datasets using natural language, switch to structured queries when precision matters, or combine both approaches in a single search. 👉 See the demo

New Multiselect In-Cell Editor

A built-in multiselect editor has been added to render a dropdown with checkboxes. Users select multiple options, and the data grid displays them as a comma-separated list by default.

Fully Custom In-Cell Editors

SVAR React DataGrid v2.6 introduces registerInlineEditor() function for building completely custom editors. Register any React component as an editor, reference it by type in your column configuration, and the grid handles the rest.

Getting Started

SVAR React DataGrid is available on GitHub and can be installed via npm.

npm install @svar-ui/react-grid

Gantt 2.6: Project Management That Scales

SVAR React Gantt v2.6 introduces powerful task filtering, improved scheduling logic, and enhanced UX.

Task Filtering: Multiple Integration Options

Version 2.6 introduces the filter-tasks action, a new API for filtering tasks in your Gantt chart. This opens up multiple integration options, from simple inline filters to AI-powered natural language queries.

With this API, you can now integrate filtering in several ways:

• Inline column filters: just add filters in grid’s columns for simple search.
• External filter controls: build your own search boxes, dropdowns, or completely custom filter UI.
• Advanced Query Builder: integrate with the FilterBuilder component from SVAR React Filter for multi-condition queries with AND/OR logic.
• Structured Syntax and Natural Language: add AI-powered natural language search or filter input with structured quieries.

Rollups: Cleaner Project Visualization

Rollups (PRO feature) simplify complex project visualization by rolling up individual tasks into their parent summary tasks. Subtasks and milestones appear as compact bars beneath summary tasks, automatically repositioning as child tasks change.

Slack (Float) Visualization

Beyond critical path analysis, SVAR React Gantt v2.6 adds slack visualization (PRO feature). It’s a scheduling metric showing how much delay a task can tolerate without affecting dependent tasks or the project deadline.

When enabled, slack calculates automatically alongside critical path analysis, revealing which tasks have schedule flexibility and which are truly critical.

Getting Started

SVAR React Gantt (open-source edition) is available on GitHub and can be installed via npm. You can try the PRO Edition for free.

npm install @svar-ui/react-gantt

Core 2.5: Performance & Polish

SVAR React Core library focuses on performance optimization and UI components that match modern application requirements.

Virtualized Dropdowns for Better Performance

Large option lists no longer impact performance. Combo, RichSelect, and MultiCombo components now use virtual scrolling — only visible items render in the DOM. Handle thousands of options with smooth, responsive interactions.

Avatar Component

The new Avatar component renders individual user profiles or avatar groups. Display profile pictures, colored backgrounds, initials, or any combination. Configure sizes, limit visible avatars in groups, and let the component handle overflow indicators automatically.

Getting Started

SVAR React Core is available on GitHub and can be installed via npm.

npm install @svar-ui/react-core

How SVAR UI Helps React Development

These updates address real pain points in modern React development:

1. Filter UX: instead of complex filters, FilterQuery delivers a fancy natural language filtering and a handy YouTrack-style structured queries.
2. Data Grid Flexibility: Custom editors shouldn’t require framework gymnastics. registerInlineEditor() of SVAR React DataGrid makes it trivial.
3. Performance at Scale: Virtualized dropdowns and optimized rendering handle enterprise-scale datasets.
4. Powerful React Gantt: Enterprise-grade features of SVAR React Gantt make it easy to integrate project schedules and timlines with pure React architecture.

If you find SVAR React components useful, consider starring SVAR React components on GitHub. It helps us maintain the library and ship more features like these ⭐

Building data-intensive React apps just got easier. Try SVAR React components and see the difference production-ready components make.