Svelte

pnpm add @qnot/core @qnot/svelte

The default builder

<script lang="ts">
  import '@qnot/core/styles.css';
  import { QueryBuilder } from '@qnot/svelte';
  import { fields } from './fields';

  let query = $state(saved);
</script>

<QueryBuilder {fields} bind:value={query} showLock />

QueryBuilder takes store, or fields with initial / bind:value, format and settings; plus onchange, components, labels, class, showNot and showLock.

Reactive helpers

setQueryStore(store) puts a store in context; getQueryStore() reads it. The create* helpers return objects whose getters read shared per-store signals (one per node, fed by the store's per-node subscriptions), so they work in components and in plain .svelte.ts modules, and each one depends only on what it reads:

<script lang="ts">
  import { createRule, getQueryStore } from '@qnot/svelte';

  let { id } = $props();
  const store = getQueryStore();
  const rule = createRule(store, id);
</script>

<select value={rule.rule.operator} onchange={(e) => rule.setOperator(e.currentTarget.value)}>
  {#each rule.operators as op}
    <option value={op.value}>{op.label}</option>
  {/each}
</select>

Available: createNode, createRule, createGroup, createQuery, createQueryValue, createIsValid, createHistory, createSettings, and createDragHandle, createDropTarget, createGroupDropZone. The default Group, Rule, ValueEditor and FunctionEditor components are exported for reuse.

The package ships .svelte source through the svelte export condition; @sveltejs/vite-plugin-svelte compiles it.