SVAR Svelte Filter: A Visual Query Builder for Svelte Apps

Filtering large datasets is a common challenge in data-heavy frontend apps. If you’re working with Svelte, and you need to let users filter data effectively, building a good filtering UI from scratch can take more time than expected.

To help solve this, we’ve just released SVAR Svelte Filter, a new open-source library that brings a clean, intuitive way to build filter queries in Svelte apps.

Whether you need simple filters or more complex logic with multiple fields, groups, and nested conditions, SVAR Svelte Filter helps solve that by offering:

• An interactive UI for query building;

• Modular components that allow you to add basic filtering or complex query builder to your app;

• A structured JSON output that you can convert to SQL or API queries.

📦 What’s Inside the SVAR Filter Package

SVAR Svelte Filter includes three components that can be used standalone or combined depending on your UI and complexity:

🧩 FilterBuilder: The key component of the package. It provides a visual query builder where users can add multiple filter rules across different fields, group filters, and combine them by AND / OR logic.

🧩 FilterEditor: A minimal component for editing a single filter rule. It can be used on its own or embedded into other UIs. Handy when you want to build your own wrapper around filter logic but don’t need the full builder.

🧩 FilterBar: A compact alternative to FilterBuilder. It renders the filters in a horizontal bar using select and input controls. This layout is useful when space is tight or when you want to keep the UI simple. FilterBar still supports multiple fields and AND/OR logic — just with a more minimal feel.

⭐️ Key Features

SVAR Svelte Filter is designed to be flexible and developer-friendly:

Advanced filtering rules
Build queries with one or multiple fields, group fields, add nested filters, and combine them with AND / OR logic. SVAR Filter supports different data types (text, numbers, dates) with relevant operators (e.g. equals, contains, begins with, greater, greater or equal, etc).

Configurable layouts
Choose vertical or horizontal layouts of the query builder to satisfy your app design needs. You can also add a simplified version of a filter bar where each field is used once and all rules are joined with AND logic.

Dynamic loading of options
Load options lazily on demand when a new filter is added or conditions change.

Localization support
Easily translate labels and format dates according to the user's locale.

Intuitive API
Set up filters with fine-grained configuration. Set and retrieve values, track changes, and connect it to your data logic.

JSON output
SVAR Filter outputs clean, structured JSON for filters that can be translated into SQL or other backend queries. The JSON structure isn't tied to any specific query language and you can transform it into whatever you need on the server side.

🚀 Getting Started

SVAR Svelte Filter is open source and free under the MIT license. You can install it via npm:

npm install wx-svelte-filter

The main component is FilterBuilder. Here's a quick example of how to import it and set up a basic configuration. To get started, you'll need to define a fields array and an options object, then pass them to the FilterBuilder component:

<script>
  import { FilterBuilder } from "wx-svelte-filter";

  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)]
  };

</script>

<FilterBuilder {fields} {options} />

🔗 Useful links that help you get started with SVAR Svelte Filter easily:

• Web page

• Documentation

• Live demos

• GitHub repo

💭 Final Thoughts

Filtering UIs can get complex fast but they don’t have to be a pain to implement. SVAR Svelte Filter gives you a flexible, modular way to add filter functionality to your Svelte apps.

If you give it a try and like what you see, we’d really appreciate a ⭐ on GitHub. Feedback, issues, and suggestions are always welcome.

Happy filtering!