Can qnot read my saved react-querybuilder queries?

Yes. Give the store format: rqb and value / onChange read and write react-querybuilder's RuleGroupType, including value sources and the independent-combinators shape. Nothing in your database has to change.

Is react-querybuilder slow?

Not for typical queries. Up to about a hundred rules, every library here responds within a frame. The gap opens on large trees: in our run, typing into one rule of a 1,000-rule query took about 57 ms in react-querybuilder and 0.4 ms in qnot.

Which one has more export formats?

react-querybuilder. Its formatQuery covers SQL, parameterized SQL, MongoDB, CEL, SpEL, JsonLogic, Elasticsearch, JSONata, LDAP, Prisma, Drizzle, Sequelize, Cypher, SPARQL, Gremlin and more. qnot covers SQL in five dialects, MongoDB, JsonLogic, Elasticsearch, SpEL and plain English.

Do I have to rewrite my UI?

You replace the builder component and translate the fields array into a defineFields schema; the mapping is mostly one to one. If you use a react-querybuilder compat package for your UI kit, pick the qnot builder for your kit (coss ui, shadcn/ui, MUI) or keep the default one.

compare

qnot vs react-querybuilder

react-querybuilder is the most used React query builder, and a good one. qnot is newer, runs outside React too, types values by field, and stays fast on very large queries. It also reads and writes react-querybuilder's JSON, so you can switch without migrating data.

Switching

react-querybuilder 8.25 · MIT

licenseqnot: MITreact-querybuilder: MIT

first render, 1,000 rulesqnot: 131 msreact-querybuilder: 482 ms

keystroke, 1,000 rulesqnot: 0.5 msreact-querybuilder: 58 ms

JS, gzippedqnot: 25.2 KBreact-querybuilder: 58 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 react-querybuilder
feature	qnot	react-querybuilder
License	MIT	MIT
UI frameworks	React, Vue, Svelte, Solid and plain DOM, over one framework-agnostic store (qnot ahead)	React (core logic is framework-agnostic)
React Native	No	Yes, separate package (react-querybuilder ahead)
UI kits	coss ui, shadcn/ui, MUI and headless builders, installed as source with shadcn add	Official compatibility packages, including MUI, Ant Design, Chakra, Fluent and Mantine
Typed rule values	Values narrow by field and operator from the schema; validated queries come back strict (qnot ahead)	Field and operator names are typeable; value is any by default
Export formats	SQL (5 dialects, bound params), MongoDB, JsonLogic, Elasticsearch, SpEL, text	20+ formats, including CEL, LDAP, Prisma, Drizzle, Cypher, SPARQL (react-querybuilder ahead)
Import	SQL WHERE, MongoDB, JsonLogic, SpEL; react-querybuilder, RAQB and jQuery QB JSON	SQL, MongoDB, JsonLogic, CEL, SpEL, JSONata, Cypher, Gremlin, SPARQL
Undo and redo	Built into the store	Yes, with QueryBuilderHistory
Drag and drop	Built in (HTML5, mouse)	Yes, @react-querybuilder/dnd with react-dnd
Evaluate in JS	compile() / matches() filter rows in the browser or on the server	Through JsonLogic export and a JsonLogic runtime
Keystroke at 1,000 rules	0.5 ms (qnot ahead)	58 ms

Measured at 1,000 rules.

The same tree in both, production builds, headless Chromium. react-querybuilder's cost per keystroke grows with the size of the query: 58 ms at 1,000 rules against 0.5 ms for qnot, whose rules each subscribe to their own node.

qnot and react-querybuilder at 1,000 rules
library	first render	keystroke	add a rule	memory	js, gzipped
qnot0.1@qnot/react	130.7ms	0.5ms	0.8ms	13.6MB	25.2KB
react-querybuilder8.25react-querybuilder	481.5ms	58ms	56.9ms	33.9MB	58KB

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. react-querybuilder takes 3.7× as long to render. The harness, its method and every size.

When react-querybuilder is the better choice.

An honest list. If one of these is you, react-querybuilder may serve you better.

You need React Native. react-querybuilder has a React Native package. qnot's bindings target the DOM.
You need an export format qnot doesn't have. CEL, LDAP, JSONata, Prisma, Drizzle, Sequelize, Cypher, SPARQL and Gremlin are built into react-querybuilder's formatQuery, along with parsers for several of them.
You want the larger ecosystem. It has been in production use for years, has many more users, and compatibility packages for Ant Design, Bootstrap, Bulma, Chakra, Fluent, Mantine, MUI and Tremor.
Your queries stay small. Below a hundred rules both feel instant, and switching buys you little on speed alone.

Switching.

Give the store format: rqb. Its value and onChange now speak react-querybuilder's RuleGroupType, so stored queries load as they are and keep being saved in the same shape.

Filters.tsx

'use client';
import '@qnot/core/styles.css';
import { defineFields, f } from '@qnot/core';
import { rqb, type RQBRuleGroup } from '@qnot/core/formats/rqb';
import { QueryBuilder } from '@qnot/react';
import { useState } from 'react';

const fields = defineFields({
  firstName: f.text({ label: 'First name' }),
  age: f.number({ integer: true }),
  plan: f.enum(['free', 'pro', 'team']),
});

export function Filters({ saved }: { saved: RQBRuleGroup }) {
  const [query, setQuery] = useState(saved);
  // before: <QueryBuilder fields={rqbFields} query={query} onQueryChange={setQuery} />
  return <QueryBuilder fields={fields} format={rqb} value={query} onChange={setQuery} />;
}

Fields move from an array to a defineFields object: inputType: 'number' becomes f.number(), a select becomes f.enum(). Operators map one to one (= to eq, beginsWith to startsWith).

formatQuery(query, 'sql') becomes encode(sqlFormat(), query, fields). The migration guide has the full tables.

Questions people ask

Can qnot read my saved react-querybuilder queries?: Yes. Give the store format: rqb and value / onChange read and write react-querybuilder's RuleGroupType, including value sources and the independent-combinators shape. Nothing in your database has to change.Migration guide
Is react-querybuilder slow?: Not for typical queries. Up to about a hundred rules, every library here responds within a frame. The gap opens on large trees: in our run, typing into one rule of a 1,000-rule query took about 57 ms in react-querybuilder and 0.4 ms in qnot.
Which one has more export formats?: react-querybuilder. Its formatQuery covers SQL, parameterized SQL, MongoDB, CEL, SpEL, JsonLogic, Elasticsearch, JSONata, LDAP, Prisma, Drizzle, Sequelize, Cypher, SPARQL, Gremlin and more. qnot covers SQL in five dialects, MongoDB, JsonLogic, Elasticsearch, SpEL and plain English.
Do I have to rewrite my UI?: You replace the builder component and translate the fields array into a defineFields schema; the mapping is mostly one to one. If you use a react-querybuilder compat package for your UI kit, pick the qnot builder for your kit (coss ui, shadcn/ui, MUI) or keep the default one.