Yes. @qnot/dom and @qnot/core are MIT licensed. No license key, no paid tier.

Does it need jQuery or a framework?

No. @qnot/dom renders with plain DOM APIs. The whole benchmark page, including the SQL export, is about 23 KB of gzipped JavaScript.

Does it work in server-rendered apps (Rails, Django, Laravel) or web components?

Yes. mountQueryBuilder takes any element and returns a dispose function, so it fits a Stimulus controller, an Alpine component, a custom element or a plain script tag that your bundler builds. @qnot/dom depends only on @qnot/core.

How do I read the query?

store.getQuery() returns the query as JSON, and store.subscribe(fn) calls you after every change. Encode it with any codec: SQL with bound parameters, MongoDB, JsonLogic, Elasticsearch, SpEL or plain English.

Is it a replacement for jQuery QueryBuilder?

It can be. It reads and writes jQuery QueryBuilder's getRules() JSON through the jqqb format, so saved rules keep working, and it renders 1,000 rules in about an eighth of the time in our benchmark. If your app is built on jQuery and Bootstrap and the plugin does what you need, there's no pressing reason to switch.

Can I customize the controls?

Yes. mountQueryBuilder takes components, labels, className, showNot and showLock. A custom value editor is a factory returning { el, update(props), destroy }; it is created once and patched in place as the rule changes.

JavaScript query builder

A query builder in plain JavaScript: no framework, no jQuery. Mount it on any element and get a typed query, undo, drag and drop and export to SQL, MongoDB and JsonLogic.

JavaScript guide

MIT · no dependencies · ~23 KB gz · TypeScript

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

installpnpm add @qnot/core @qnot/dom

A JavaScript 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.ts

import '@qnot/core/styles.css';
import { createQueryStore, encode } from '@qnot/core';
import { sqlFormat } from '@qnot/core/formats/sql';
import { mountQueryBuilder } from '@qnot/dom';
import { fields, initial } from './fields';

const pg = sqlFormat({ dialect: 'postgres', params: 'numbered' });
const store = createQueryStore({ fields, initial });
const output = document.getElementById('sql')!;

const dispose = mountQueryBuilder(document.getElementById('filters')!, store, { showLock: true });

// { sql: 'age >= $1 AND plan IN ($2, $3) AND …', params: [21, 'pro', 'team', …] }
const render = () => (output.textContent = encode(pg, store.getQuery(), fields).sql);
render();
store.subscribe(render);
// later: dispose();

Each node subscribes to its own id and patches only its own elements, with a keyed reconcile per group, so the vanilla builder keeps the same one-rule-one-update behaviour as the framework bindings. bindDragHandle, bindDropTarget and bindGroupDropZone wire drag and drop into your own markup.

Web components, Alpine, htmx, Rails or Django templates: anything that hands you an element can host it. See the vanilla guide.

What you get.

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

How it compares.

The other framework-free query builders are jQuery QueryBuilder and the commercial Syncfusion and DevExtreme components. Here is how they measure up, with the same 1,000-rule tree.

Questions people ask

Is it free?: Yes. @qnot/dom and @qnot/core are MIT licensed. No license key, no paid tier.
Does it need jQuery or a framework?: No. @qnot/dom renders with plain DOM APIs. The whole benchmark page, including the SQL export, is about 23 KB of gzipped JavaScript.
Does it work in server-rendered apps (Rails, Django, Laravel) or web components?: Yes. mountQueryBuilder takes any element and returns a dispose function, so it fits a Stimulus controller, an Alpine component, a custom element or a plain script tag that your bundler builds. @qnot/dom depends only on @qnot/core.
How do I read the query?: store.getQuery() returns the query as JSON, and store.subscribe(fn) calls you after every change. Encode it with any codec: SQL with bound parameters, MongoDB, JsonLogic, Elasticsearch, SpEL or plain English.Formats
Is it a replacement for jQuery QueryBuilder?: It can be. It reads and writes jQuery QueryBuilder's getRules() JSON through the jqqb format, so saved rules keep working, and it renders 1,000 rules in about an eighth of the time in our benchmark. If your app is built on jQuery and Bootstrap and the plugin does what you need, there's no pressing reason to switch.qnot vs jQuery QueryBuilder
Can I customize the controls?: Yes. mountQueryBuilder takes components, labels, className, showNot and showLock. A custom value editor is a factory returning { el, update(props), destroy }; it is created once and patched in place as the rule changes.Vanilla guide