Getting started

This page describes how to start with SVAR Svelte Filter widget by adding it to your Svelte application.

Step 1. Install the package

SVAR Svelte Filter is an open-source library distributed under the MIT license.

npm install wx-svelte-filter

See also Installation instructions.

Step 2. Import components

To use the installed package in your application, you need to import one of the corresponding components: FilterBuilder, FilterEditor or FilterBar. Since FilterBuilder is the main component, here's an example of importing it from the wx-svelte-filter package:

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

Step 3. Initialize components

Use the corresponding tag to add the component to a page:

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

<FilterBuilder />

Follow the related components sections for more information on initialization and configuration: FilterBuilder, FilterEditor, FilterBar.

Step 4. Add data

It's required to provide an array of fields and options for the components.

Fields used in filtering can be defined via the fields property:

• id - a unique identifier for the field (must match your data keys)
• label - the human-readable label used in the UI
• type - the type of the field ("text", "number", "date", "tuple")

Options are set as an object where keys are field ids and values are the options for these fields:

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

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

Step 5. Basic setup

Now you are ready for a basic setup to get a feel for the widgets before wiring up data filtering logic and configure other settings. It's required to add the fields array and the options object and pass it 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} />    

note

The FilterEditor and FilterBar component have slightly different API, so please have a look at their documentation or study the When to use each component guide.

Step 6. Apply a skin

To add look and feel to your application, apply a skin. The SVAR Svelte Filter library provides two themes:

• Willow
• WillowDark

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

Apply the desired theme by wrapping your entire application within the skin tag.

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

<Willow>
  <FilterBuilder />
</Willow>

What's next

Now you are ready to configure the FilterBuilder widget to the needs of your application.

• Head over to the Components section for detailed setup guides on each component
• For in-depth functionality and integration details, check out the API Reference documentation

Everything you need to start building powerful, customizable filters is just a click away.