compare

qnot vs DevExtreme FilterBuilder

DevExtreme's FilterBuilder is a compact, click-to-edit filter made to drive its own DataGrid. qnot is a standalone MIT query builder with inline editors, typed values and export to SQL, MongoDB and JsonLogic. Saved expressions convert with one small function.

devextreme 26.1 · Commercial

licenseqnot: MITDevExtreme FilterBuilder: Commercial
first render, 1,000 rulesqnot: 117 msDevExtreme FilterBuilder: 141 ms
keystroke, 1,000 rulesqnot: 0.4 msDevExtreme FilterBuilder: n/a (no inline editing)
JS, gzippedqnot: 25.7 KBDevExtreme FilterBuilder: 284 KB

Feature by feature.

What each library does out of the box, from its docs, its package contents and our own harness. Where it says no, an add-on or your own code may still get you there.
Features of qnot and DevExtreme FilterBuilder
featureqnotDevExtreme FilterBuilder
LicenseMIT (qnot ahead)Commercial, per developer
FrameworksReact, Vue, Svelte, Solid, plain DOMjQuery, Angular, React, Vue; ASP.NET wrappers
Part of a suiteNo, one libraryYes: DataGrid, PivotGrid, charts, schedulers, forms (DevExtreme FilterBuilder ahead)
Value editingInline editors for every valueValues shown as text; an editor opens on click
OutputPlain JSON, typed by the schemaDevExtreme filter expression (nested arrays)
Export formatsSQL (5 dialects, bound params), MongoDB, JsonLogic, Elasticsearch, SpEL, text (qnot ahead)None built in; the expression feeds DevExtreme data sources
Grid integrationThrough your data layerNative with DataGrid and PivotGrid (DevExtreme FilterBuilder ahead)
Group operationsAND, OR, NOTAnd, Or, Not And, Not Or
Custom operationsdefineOperator() with evaluation and per-format outputcustomOperations
Undo, drag and dropBuilt in (qnot ahead)Not built in
JS, gzipped25.7 KB (qnot ahead)283.8 KB
Add a rule, 1,000 rules0.7 ms4.7 ms

Measured at 1,000 rules.

DevExtreme's widget is plain JavaScript, so it runs against qnot's framework-free build; the React build is listed too. DevExtreme renders values as text, which keeps its first render close to qnot's (141 ms against 117 ms). It ran unlicensed, with its trial banner showing.

Run of 2026-10-19: Apple M5, Chromium 156 via Playwright 1.64, production builds, no CPU throttling. Medians of fresh pages (5 to 9 per size); the tree is 10 fields in groups of 10 rules. JS is gzipped and excludes React for React libraries (jQuery is included). Lower is better. DevExtreme FilterBuilder takes 1.2× as long to render. The harness, its method and every size.

When DevExtreme FilterBuilder is the better choice.

An honest list. If one of these is you, DevExtreme FilterBuilder may serve you better.
  • Your app is built around DevExtreme's DataGrid or PivotGrid. FilterBuilder's value is the grid's own filter expression, so it plugs straight in.
  • You already license DevExtreme and want one theme and one vendor across grids, charts, schedulers and forms.
  • You build with Angular or ASP.NET. DevExtreme supports both; qnot has no binding for them.
  • You want a compact, click-to-edit filter. Values shown as text take less room than a row of inputs, which suits dense admin screens.

Switching.

There's no drop-in format for DevExtreme, but filter expressions are plain nested arrays. This function converts them, including '!' negation and anyof / noneof.
from-devextreme.ts

Fields become a schema: dataType: 'string' is f.text(), or f.enum() with a lookup; 'number', 'boolean' and 'date' map to f.number(), f.boolean(), f.date().

Then mount a framework-free, React or Vue builder on the result.

Questions people ask

Is DevExtreme free?
No. DevExtreme is a commercial suite from DevExpress, licensed per developer; see DevExpress licensing for the current terms. qnot is MIT licensed.
Why does DevExtreme have no keystroke number?
Its FilterBuilder shows values as text and opens an editor when you click one, so there is no inline input to type into. That is a design choice, and it is also why it renders large trees with few DOM nodes.
Can qnot filter a DevExtreme DataGrid?
Not directly: qnot's output is its own JSON, not a DevExtreme filter expression. Filter on your server instead (encode the query to SQL or a MongoDB filter and load the grid's data source from the result), or write the reverse of the converter above. If the grid is the center of your app, FilterBuilder's native expressions are the shorter path.
How do I convert saved filter expressions?
The function above walks DevExtreme's nested array format ([field, operation, value], joined by 'and' / 'or', negated with '!') and builds a qnot query. Run validateQuery on the result to catch operations that didn't map.

Other comparisons