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.

Why Create MCP Server for a UI Component?

AI-assisted coding has changed how developers work. Tools like Cursor, GitHub Copilot, and Claude are no longer optional; they’re part of the daily workflow. Instead of reading documentation, developers prefer to ask their AI assistant directly.

For UI library authors, this creates a problem. We offer SVAR React Gantt component for building Gantt charts in web applications. Like many JavaScript/React components, it comes with extensive documentation covering APIs, configuration options, and usage examples.

When a developer asks an AI assistant, “How do I add a task in SVAR React Gantt?”, the model doesn’t actually know our API. It guesses, hallucinates methods, or borrows patterns from similar libraries that don’t apply.

So we decided to make our documentation AI-native. Instead of expecting developers to read the docs, we brought the docs directly to the AI tools they already use.

MCP (Model Context Protocol) is Anthropic’s open standard for connecting AI assistants to external data sources. Think of it as a bridge between your documentation and any AI tool that supports the protocol. We built an MCP server that lets AI assistants query our documentation intelligently.

This is the story of how we got there.

Why Plain Documentation Isn’t Enough?

The llms.txt Approach

You might have heard of llms.txt, a proposed standard for making websites AI-readable. The idea is simple: create a text file with all your documentation in a format LLMs can consume.

We tried it, but our complete documentation is approximately 84k tokens. That’s a problem. The entire file has to be sent to the model as context on every query, even when the question is small. This leads to higher latency, higher costs, and leaves less room for the actual user question and the model’s reasoning.

llms.txt works for simple products with minimal docs. For a complex, full-featured UI component with extensive documentation, it’s not very practical.

The “Just Ask ChatGPT” Problem

What happens when someone asks ChatGPT (or any other AI tool) about your UI component without any context? You usually get one of the following:

• Hallucinated APIs: The model invents methods that sound plausible but don’t exist
• Outdated information: Training data is months or years old
• Wrong patterns: It applies conventions from similar libraries that don’t match yours

To test this, we asked LLMs baseline questions about our Gantt component. The answers were confidently wrong about 90% of the time.

Your users deserve better.

First Attempt: Off-the-Shelf RAG

RAG (Retrieval-Augmented Generation) seemed like the obvious solution. Feed your documentation into a vector database, retrieve relevant chunks when someone asks a question, pass those chunks to an LLM.

We set up a standard pipeline:

• Split documentation into chunks
• Generate embeddings using OpenAI’s embedding model
• Store in a vector database
• On query: find similar chunks, pass to GPT for answer

As a result we’ve got 68% correct answers on our test set. Common failures were:

• Retrieved chunks were tangentially related but not actually helpful
• Partial answers when information was split across chunks
• Missed context that would have clarified the answer

The lesson we learnt: generic RAG doesn’t understand semantics specific for complex UI components. In the case of our Gantt chart library, it doesn’t know that a question about “task dependencies” needs both the Tasks API docs AND the Links configuration section.

Custom RAG: Better Accuracy, Worse Latency

After this first try, we reworked the approach. Here is what we’ve used:

Custom chunking strategy: Instead of splitting by character count, we chunked the documentation by semantic units. Each API method became its own chunk. Related configuration options stayed together, and code examples remained attached to their explanations.

Better embedding approach: We experimented with different ways to represent chunks, adding metadata about what section of docs each chunk came from.

As a result, accuracy improved to 84% and answers were more complete and correct. However, latency was 25–60s (avg 38s) per query, which is too slow for interactive use. Users expect near-instant responses from their AI assistant.

The lesson we learnt: we improved the quality of answers but created a speed bottleneck.

The Breakthrough: Context-Only Architecture

Then we had an insight that changed everything. See, the traditional RAG model does this:

1. Retrieve relevant chunks
2. Pass chunks + question to LLM
3. LLM generates answer
4. Return answer to user’s AI assistant
5. User’s AI assistant processes and presents

Have you noticed the redundancy? We’re running an LLM in step 2–3, then the user’s AI assistant (another LLM) processes our output again. That’s two LLM calls doing overlapping work.

That is why we decided to skip our LLM entirely. Just return the relevant context chunks, so the path will look like this:

Query → Our MCP Server → Retrieve Context → Return Raw Chunks → Agent’s LLM Synthesizes

The agent’s LLM is already going to process whatever we return. So we let it do all the synthesis work, while our job is just to find the right context. This meant our data preparation mattered more than ever:

• Each chunk had to be self-contained enough to be useful
• Relationships between concepts were pre-computed
• Chunks were structured for easy LLM consumption

Results:

• Latency dropped to 6–17s (avg 11s)
• Quality stayed the same (or improved, since the agent’s LLM is often better than what we’d run)
• Cost decreased significantly

This is the architecture we shipped:

Preventing Off-Topic and Abusive Queries

Our MCP server is publicly available. Anyone can connect to it. That creates a problem: people might ask unrelated questions. “What’s the weather?” “Write me a poem.” “Explain quantum physics.”

Why does this matter?

• Wasted compute: Every query costs money to process
• Poor UX: Returning Gantt chart docs for a weather question is confusing

So, as a solution we decided to add a lightweight intent classifier as the first step. Before doing any retrieval, we run a fast check: “Is this question about Gantt charts, scheduling, or task management?”

• Yes → Proceed with retrieval
• No → Return a polite “I can only help with Gantt-related questions”

This isn’t a complex model, but intentionally simple and fast. We’re not trying to perfectly classify every edge case, we just filter obvious misuse.

Results: Even with this simple approach, intent filtering proved effective. Most clearly off-topic queries are rejected early, before any retrieval happens, which reduces unnecessary compute and avoids confusing responses.

As we evolve the system, this lightweight filtering will be replaced with a more robust, shared classifier across components, further improving accuracy without increasing complexity.

The Tools We Used

From a technical perspective, we kept the stack intentionally simple:

• LlamaIndex handles the RAG pipeline — document ingestion, semantic chunking, embeddings, and retrieval.
• FastMCP provides the MCP server layer — protocol compliance, request routing, and exposure of tools and resources.

This combination let us iterate quickly on retrieval quality without coupling it to MCP mechanics or model selection.

What’s Next: Multi-Components Architecture

The SVAR React library isn’t just a Gantt component. We offer multiple components: DataGrid, File Manager, Core controls, and more. Currently, each would need its own MCP server. That’s not scalable, neither for us nor for users who work with multiple SVAR components.

Ideally, we would like to have one MCP server that handles all SVAR components.

The challenges:

1. Query routing: When someone asks a question, which SVAR component’s docs should we search? Sometimes it’s obvious (“how do I create a Gantt task”). Sometimes it’s ambiguous (“how do I handle drag and drop”, that exists in multiple components).
2. Shared concepts: Some concepts span components (theming, localization, common event patterns). How do we avoid duplicating this information while keeping each component’s context self-contained?
3. Context budget: If we need to pull docs from multiple widgets, we might exceed reasonable context limits. How do we prioritize?

Currently we’re exploring approaches:

• Query classification to route to specific component
• A shared “common concepts” knowledge base
• Dynamic context allocation based on query complexity

We haven’t come up with a solution yet, but we’re actively working on it.

Lessons for UI Component Authors

If you’re building React or JavaScript components and want to make them AI-accessible by building an MCP server for your documentation, here’s what we learned.

Keep It Simple, but Build Your Own

Off-the-shelf RAG solutions optimize for the general case. They don’t know that your addTask() method is the most important thing in your docs, or that questions about “dependencies” always need two sections together.

You don’t need a complex system. You need a simple system tuned to your specific documentation.

Chunking Is Everything

How you split your documentation matters more than which embedding model you use. Here is what worked for us:

• Chunk by semantic units (methods, components, features) , not arbitrary character counts
• Each chunk should be self-contained enough to answer a question on its own
• Keep code examples with their explanations

Bad chunking: “This method takes three parameters. The first is…”

Good chunking: Complete method documentation including parameters, return value, example, and common use cases. Everything in one chunk.

Simple Models Are Enough with Good Context

Don’t reach for GPT-5.2 pro when GPT-5-nano with great context works. The quality of retrieved context matters more than model capability.

We see better results with a fast, cheaper model + excellent context retrieval, than with a powerful model + mediocre context retrieval. Your optimization effort should go into retrieval quality, not model selection.

Measure Relentlessly

Define what “correct answer” means for your component or library. Build a test set of real developer questions (pull from support tickets, forum questions, or GitHub issues).

Track three things:

• Accuracy: % of questions answered correctly
• Latency: but be explicit about what you’re measuring:
  - For an MCP server, prioritize time to last token — how long it takes to deliver the complete context to the agent
  - For user-facing AI tools, time to first token matters more, because it defines perceived responsiveness
• Cost: Per-query cost at your expected scale

Improve what you measure.

Conclusion

We started with a simple problem: AI assistants don’t know SVAR React Gantt’s API, so they give wrong answers.

We tried the easy path (llms.txt), but it didn’t scale. We tried generic RAG, and it wasn’t accurate enough. We built a custom RAG, but it was too slow. We stripped out redundant LLM processing, and finally got something that works.

The breakthrough came when we removed redundant LLM processing and focused our MCP server on a single responsibility: retrieving the right context, not generating answers.

The architecture we shipped is simple:

• A lightweight intent filter to reject off-topic queries
• Semantic retrieval over carefully structured documentation
• Raw context returned directly to the agent’s LLM for synthesis

For UI component and library authors, making your product AI-accessible is no longer a nice-to-have. Developers expect their AI tools to understand whatever they’re working with. If your documentation isn’t reachable by those tools, friction is inevitable.

The good news is that this doesn’t require a massive system. Start simple, optimize retrieval quality, measure accuracy and latency, and iterate.

If you want a more technical breakdown of MCP primitives and architecture, we published a deeper dive on our blog.

How We Built MCP Server for Our React Gantt Component was originally published in ITNEXT on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 the MIT License

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, 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: Svelte Gantt Trial & React Gantt 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
• up-to-date API references
• live demos

This helps avoid outdated examples and incorrect suggestions when integrating or customizing the Gantt chart with AI tools. If you already rely on AI code assistants in your workflow, the MCP server makes them far more reliable when working with SVAR React Gantt.

SVAR Component Library v2.4 (React & Svelte)

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

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

Start building amazing web apps with SVAR components today!

SVAR Gantt 2.4: A Modern Gantt Chart Library for React & Svelte under the MIT License was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

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 That Match Your Workflow

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.

Use Cases:

• Two-week sprints
• Fiscal quarters
• Irregular project phases
• Half-year periods

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.

The Bottom Line

With this update, SVAR React Gantt becomes one of the few React timeline libraries that combine modern React architecture, fine-grained scheduling, and deep customization — all in one open-source package.

Whether you’re building a project planner, workforce scheduler, or resource management dashboard, SVAR React Gantt gives you the flexibility to do it 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!

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter.

And before you go, don’t forget to clap and follow the writer️!

SVAR React Gantt v2.3: Modern Project Timelines for React 19 was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

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, collapsible column groups, auto-sizing.
• Backend/export: RestDataProvider integration, print API, CSV export.
• Customization: light/dark themes, CSS variables, localization.

In other words, SVAR React DataGrid v2.3 is now a powerful datagrid component with a solid feature set that can significantly save your development time. And what’s even better, it’s open-source.

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

Learn More

Here you’ll find more details on how to start using SVAR React DataGrid v2.3 and try the available features:

• GitHub repository 🛠️
• Live demos 👀
• Documentation 📚
• Full release notes 📝

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.

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter.

And before you go, don’t forget to clap and follow the writer️!

SVAR React DataGrid v2.3 — A Free Alternative for Advanced Data Tables was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

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:

• Getting started guide
• API references
• Demos

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! 🌟