Yes. @qnot/svelte and @qnot/core are MIT licensed, with no license key, no trial banner and no paid tier.

Which Svelte versions are supported?

Svelte 5. The components use runes, and the reactive helpers subscribe once per node, so an edit only wakes the rows it changes.

Does it work with SvelteKit?

Yes. The package ships .svelte source through the svelte export condition, which SvelteKit's Vite plugin compiles. The default builder renders on the server (we checked it with svelte/server's render), and your +server.ts or form actions can import the same fields.ts to validate the query and turn it into SQL.

Does it support bind:value?

Yes. QueryBuilder takes value as a bindable prop, plus onchange. You can also pass a store you created and share it with setQueryStore.

Can I write my own components?

Yes. createRule, createGroup, createQuery, createHistory and the drag helpers return objects whose getters subscribe only to what they read. They work in components and in .svelte.ts modules. The default Group, Rule and ValueEditor are exported for reuse.

Can the same query run on the server?

Yes. The query is plain JSON typed by your schema. On the server, validate it with validateQuery, then encode it to parameterized SQL, a MongoDB filter or JsonLogic, or filter rows in memory with compile.

Svelte query builder

An open-source query builder for Svelte 5. bind:value in, typed query out, with undo, drag and drop, validation and export to SQL, MongoDB and JsonLogic.

Svelte guide

MIT · Svelte 5 · runes · TypeScript

@qnot/svelte, default builder, live on this page. Edit a rule and watch the exports.

installpnpm add @qnot/core @qnot/svelte

A Svelte query builder in two files.

The fields you can query, and the component that edits them. It's the code behind the demo above, minus the export tabs.

fields.ts

import { defineFields, f, type QueryOf } from '@qnot/core';

export const fields = defineFields({
  name: f.text(),
  age: f.number({ min: 0, max: 120, integer: true }),
  plan: f.enum(['free', 'pro', 'team', 'enterprise']),
  tags: f.multiEnum(['vip', 'beta', 'churn-risk', 'partner']),
  verified: f.boolean(),
  signedUp: f.date({ label: 'Signed up' }),
});

export const initial: QueryOf<typeof fields> = {
  kind: 'group',
  combinator: 'and',
  children: [
    { kind: 'rule', field: 'age', operator: 'gte', value: 21 },
    { kind: 'rule', field: 'plan', operator: 'in', value: ['pro', 'team'] },
    {
      kind: 'group',
      combinator: 'or',
      children: [
        { kind: 'rule', field: 'tags', operator: 'hasAny', value: ['vip'] },
        { kind: 'rule', field: 'signedUp', operator: 'gt', value: '2025-01-01' },
      ],
    },
  ],
};

Filters.svelte

<script lang="ts">
  import '@qnot/core/styles.css';
  import { encode } from '@qnot/core';
  import { sqlFormat } from '@qnot/core/formats/sql';
  import { QueryBuilder } from '@qnot/svelte';
  import { fields, initial } from './fields';

  const pg = sqlFormat({ dialect: 'postgres', params: 'numbered' });

  let query = $state.raw(initial);
  // { sql: 'age >= $1 AND plan IN ($2, $3) AND …', params: [21, 'pro', 'team', …] }
  const where = $derived(encode(pg, query, fields));
</script>

<QueryBuilder {fields} bind:value={query} showLock />
<pre>{where.sql}</pre>

For more control, put a store in context with setQueryStore and read it with getQueryStore. The create* helpers (createRule, createGroup, createQuery, createHistory) each subscribe only to the node they read, so editing one rule updates one rule.

The default builder takes components, labels and class. See the Svelte guide.

What you get.

Everything below works in every binding, because it lives in the store, not the components.

How it compares.

Most Svelte query builders you'll find come inside commercial component suites. Below, their JavaScript builds against qnot's framework-free build on the same 1,000-rule tree. The Svelte binding has its own numbers.

Questions people ask

Is it free?: Yes. @qnot/svelte and @qnot/core are MIT licensed, with no license key, no trial banner and no paid tier.
Which Svelte versions are supported?: Svelte 5. The components use runes, and the reactive helpers subscribe once per node, so an edit only wakes the rows it changes.
Does it work with SvelteKit?: Yes. The package ships .svelte source through the svelte export condition, which SvelteKit's Vite plugin compiles. The default builder renders on the server (we checked it with svelte/server's render), and your +server.ts or form actions can import the same fields.ts to validate the query and turn it into SQL.Server usage
Does it support bind:value?: Yes. QueryBuilder takes value as a bindable prop, plus onchange. You can also pass a store you created and share it with setQueryStore.
Can I write my own components?: Yes. createRule, createGroup, createQuery, createHistory and the drag helpers return objects whose getters subscribe only to what they read. They work in components and in .svelte.ts modules. The default Group, Rule and ValueEditor are exported for reuse.Svelte guide
Can the same query run on the server?: Yes. The query is plain JSON typed by your schema. On the server, validate it with validateQuery, then encode it to parameterized SQL, a MongoDB filter or JsonLogic, or filter rows in memory with compile.Formats