SVAR Logo
DemosLicensesContact
Get Started
 
 
 
 
 
 
 
 

Intuitive Filter Component for Svelte

SVAR Svelte Filter is a lightweight and flexible Svelte library for powerful data filtering - from inline inputs to advanced query builders and AI natural language search.

Get Started
View Demos

Licensed under MIT

Also available for:

Add Filtering Feature with Ease

With the SVAR Filter library, you can add a user-friendly filtering UI to lists, data tables, or any array of data. Build filtering rules and query logic for one or multiple fields, create nested conditions, and group filters using AND/OR operators.

Four Svelte Components for Filtering

SVAR Svelte Filter library includes four components designed for different filtering needs. Each can be used standalone and saves your dev time.

FilterBuilder - advanced query builder

The full-featured visual query builder for complex logic. Build advanced multi-field queries with AND/OR groups, nested conditions, and full control. Perfect for admin dashboards and power users who need sophisticated filtering.
SVAR picture

FilterQuery - query syntax or natural language

A YouTrack-style search bar that supports three input styles: structured syntax (field:value), natural language ("show me tasks due this week"), or both mixed together. Optional AI support converts conversational queries to structured filters instantly.
SVAR picture

FilterBar - inline filter input

A compact, inline search toolbar for quick filtering. Lightweight but powerful - great for filtering tables and dashboards without the complexity of a full builder.
SVAR picture

FilterEditor - single filter rule

A lightweight standalone filter for editing a single rule. Use it when you already have your own controls for combining filters. Ideal for inline editing within custom interfaces.
SVAR picture
Star on GitHub

See SVAR Svelte Filter in Action

This demo shows how FilterBuilder component works with SVAR Svelte DataGrid.
Edit, add, or delete filter conditions. Double-click a filter field to change it. For the best experience, view this page on a desktop device to enjoy the live demo, as it looks great on larger screens!

Open Fullscreen Demo

Why SVAR Svelte Filter Library?

Multi-field filtering

Build filtering rules for multiple fields at once, add sub-filters, group and combine filters with AND/OR logic. Different conditions can be set to handle complex filtering scenarios.

Multiple data types support

SVAR Svelte Filter components support different types of filters to process text, numeric and date values. Dates and numbers can be displayed in a format familiar to the user.

Dynamic loading of options

You can load field options on demand when a new filter is created. This improves performance with large datasets or dynamic fields.

Natural language search

Use powerful FilterQuery to let your users search with structured syntax, natural language, or both. One input field, infinite flexibility. AI support is optional, as the filter works offline with pure syntax.

Full localization

Customize text labels and date formats to match your language and regional standards. Provide your users with a familiar, intuitive filtering experience adjusted to their cultural environment.

Developer-friendly API

SVAR Svelte Filter library includes detailed settings for each filter type. Its straightforward API makes it easy to set and retrieve values, as well as track changes. Full TypeScript support is included for quick error catching.
Get Started

Professional support

Need custom features or integration help? Our experienced team provides priority support, custom development, and consulting services.

Contact Us

Resources

icon

How to start guide

Quick start

icon

Community forum

Visit forum

icon

GitHub repository

Visit github