# qnot

> A query builder that stays fast at a thousand rules. Fully typed from schema to SQL, framework-agnostic, any UI kit, about 15 KB.

Every page is available as Markdown by adding `.md` to its URL (e.g. https://coss.com/docs/quick-start.md). The full docs in one file: https://coss.com/llms-full.txt

# Getting started

- [Introduction](/docs): A query builder that stays fast at a thousand rules, typed from your schema to the SQL it writes.
- [Installation](/docs/installation): Add the core and the binding for your framework.
- [Quick start](/docs/quick-start): A typed query builder in React, from schema to SQL.
- Concepts
  - [Schema and types](/docs/concepts/schema): Fields describe what can be queried. The query's types follow from them.
  - [The store](/docs/concepts/store): A normalized tree with per-node subscriptions, which is why edits stay fast.
  - [Formats](/docs/concepts/formats): Export a query to SQL, MongoDB, JsonLogic, Elasticsearch, SpEL or text, and read other libraries' JSON both ways.
  - [Validation and sanitizing](/docs/concepts/validation): Per-node issues from the schema, strict narrowing, and cleaning queries loaded from storage.
  - [Evaluating queries in JavaScript](/docs/concepts/evaluation): Compile a query into a predicate and filter rows in the browser or on the server.
- Guides
  - [React](/docs/guides/react): The default builder, the store hooks, and swapping in your own components.
  - [Building a custom UI](/docs/guides/custom-ui): Your own builder from the headless hooks, with coss ui as the example kit.
  - [Install with shadcn](/docs/guides/shadcn): Add the coss ui query builder or any example to your project as source, with one command.
  - [Vue](/docs/guides/vue): Composables over the store, and a QueryBuilder component that supports v-model.
  - [Svelte](/docs/guides/svelte): Rune-friendly reactive helpers and Svelte 5 components.
  - [Solid](/docs/guides/solid): Fine-grained primitives over the store, and a Solid QueryBuilder.
  - [Vanilla DOM](/docs/guides/vanilla): mountQueryBuilder with no framework, and DOM helpers for drag and drop.
  - [On the server](/docs/guides/server): Share one schema, validate what the browser sends, and run it as parameterized SQL or in memory.
  - [Lists and nested fields](/docs/guides/arrays-and-structs): Struct fields become dotted paths; array fields are queried with "some / all / none / at least N" groups.
  - [Custom operators and functions](/docs/guides/operators-and-functions): Add operators like "within distance", and functions like lower() or relativeDate(), with output for each format.
  - [Routing and switch cases](/docs/guides/routing-and-cases): Ordered conditions with results, first match wins, like a routing form or CASE WHEN.
  - [Locks, read-only and limits](/docs/guides/settings): Settings that decide what people can change, and how the UI reflects them.
  - [Translation](/docs/guides/i18n): Override UI labels, operator names and validation messages.
  - [Migrating from react-querybuilder](/docs/guides/migrate-react-querybuilder): Keep your saved queries. The store speaks react-querybuilder's JSON through the rqb format.
  - [Migrating from RAQB](/docs/guides/migrate-raqb): From react-awesome-query-builder's config and Immutable tree to a typed schema and plain JSON.
- Reference
  - [Field builders](/docs/reference/fields): Every option of f.text, f.number, f.enum and the rest.
  - [Operators](/docs/reference/operators): Every built-in operator, its value shape, and the kinds that use it by default.
  - [Store](/docs/reference/store): Every method of QueryStore.
  - [Settings](/docs/reference/settings): The StoreSettings object.
  - [Codecs](/docs/reference/codecs): What each built-in format codec does with every feature.
  - [Hooks by framework](/docs/reference/hooks): The same store API in React, Vue, Svelte, Solid and the DOM.
  - [Utilities](/docs/reference/utilities): Helpers for building UIs, converting values, and working with the schema.

## Pages

### Frameworks

- [React query builder](https://coss.com/qnot/react-query-builder): An MIT-licensed React query builder: typed from your schema to parameterized SQL, MongoDB and JsonLogic, with undo, drag and drop. Stays fast at 1,000 rules.
- [Vue query builder](https://coss.com/qnot/vue-query-builder): An MIT-licensed query builder for Vue 3 with v-model, composables, drag and drop, undo and validation. Export to SQL, MongoDB and JsonLogic. No license key.
- [Svelte query builder](https://coss.com/qnot/svelte-query-builder): An MIT-licensed query builder for Svelte 5 with bind:value, rune-friendly helpers, drag and drop, undo and validation. Export to SQL, MongoDB and JsonLogic.
- [Solid query builder](https://coss.com/qnot/solid-query-builder): An MIT-licensed query builder for SolidJS with fine-grained primitives, drag and drop, undo and validation. Export to SQL, MongoDB and JsonLogic.
- [JavaScript query builder](https://coss.com/qnot/javascript-query-builder): A vanilla JavaScript query builder with no framework and no jQuery: mount it on any element, export to SQL, MongoDB and JsonLogic. MIT, about 23 KB gzipped.

### UI kits

- [shadcn/ui query builder](https://coss.com/qnot/shadcn-query-builder): A complete query builder made of shadcn/ui components. Free and MIT licensed, no API key, no account: one npx shadcn add puts the source in your project.
- [coss ui query builder](https://coss.com/qnot/coss-ui-query-builder): qnot's reference query builder, made of coss ui components on Base UI: functions, list conditions, field references, locks. MIT, one shadcn command.
- [MUI query builder](https://coss.com/qnot/mui-query-builder): A query builder made of Material UI components: TextField, Select, Autocomplete. MIT licensed, installs as source with one shadcn command. No MUI X license.
- [Headless query builder](https://coss.com/qnot/headless-query-builder): A headless query builder: typed hooks over a fast store, plus a complete plain HTML and Tailwind builder to start from. Swap in your design system. MIT.

### Compare

- [Benchmarks](https://coss.com/qnot/benchmarks): qnot and five other JavaScript query builders measured from 10 to 5,000 rules: first render, keystroke, field and operator changes, drag, add and remove, memory, DOM size, 4× CPU throttling, codec throughput and bundle size.
- [All comparisons](https://coss.com/qnot/compare): Six JavaScript query builders compared on features, licensing, bundle size and measured speed at 1,000 rules, with notes on when each is the right pick.
- [vs react-querybuilder](https://coss.com/qnot/compare/react-querybuilder): qnot and react-querybuilder compared: features, measured speed at 1,000 rules, bundle size, when react-querybuilder fits better, and keeping saved queries.
- [vs react-awesome-query-builder](https://coss.com/qnot/compare/react-awesome-query-builder): qnot and react-awesome-query-builder (RAQB) compared: features, measured speed at 1,000 rules, bundle size, when RAQB fits better, and keeping saved trees.
- [vs jQuery QueryBuilder](https://coss.com/qnot/compare/jquery-querybuilder): qnot and jQuery QueryBuilder compared: features, plugins, measured speed at 1,000 rules, bundle size, when the plugin fits better, and keeping getRules() JSON.
- [vs Syncfusion](https://coss.com/qnot/compare/syncfusion-query-builder): qnot and the Syncfusion Query Builder compared: licensing, features, measured speed at 100 and 1,000 rules, bundle size, and when Syncfusion fits better.
- [vs DevExtreme](https://coss.com/qnot/compare/devextreme-filterbuilder): qnot and the DevExtreme FilterBuilder compared: licensing, features, measured speed at 1,000 rules, bundle size, and when DevExtreme fits better.

### Tools

- [All converters](https://coss.com/qnot/tools): Free online query converters: SQL to MongoDB, JsonLogic to SQL, react-querybuilder and RAQB JSON to SQL, SQL to Elasticsearch. Runs in your browser, no sign-up.
- [SQL to MongoDB](https://coss.com/qnot/tools/sql-to-mongodb): Convert a SQL WHERE clause to a MongoDB filter online: IN, BETWEEN, LIKE, IS NULL, AND/OR and NOT become $in, $gte, $regex and $or. Free, runs in your browser.
- [MongoDB to SQL](https://coss.com/qnot/tools/mongodb-to-sql): Turn a MongoDB filter into a SQL WHERE clause for Postgres, MySQL, SQLite or SQL Server, with inline values or bound parameters. Free and runs in your browser.
- [SQL to JsonLogic](https://coss.com/qnot/tools/sql-to-jsonlogic): Convert a SQL WHERE clause into JsonLogic rules you can evaluate in the browser or on the server. Handles IN, BETWEEN, LIKE and NULL checks. Free, client-side.
- [JsonLogic to SQL](https://coss.com/qnot/tools/jsonlogic-to-sql): Convert JsonLogic rules into a SQL WHERE clause for Postgres, MySQL, SQLite or SQL Server, inline or with bound parameters. Free and runs in your browser.
- [JsonLogic to MongoDB](https://coss.com/qnot/tools/jsonlogic-to-mongodb): Convert JsonLogic rules into a MongoDB filter: comparisons, in, some/all/none and and/or become $gte, $in, $elemMatch and $or. Free, runs in your browser.
- [SQL to Elasticsearch](https://coss.com/qnot/tools/sql-to-elasticsearch): Convert a SQL WHERE clause into an Elasticsearch bool query: term, terms, range, wildcard and exists clauses in must, should and must_not. Free, in-browser.
- [react-querybuilder to SQL](https://coss.com/qnot/tools/react-querybuilder-to-sql): Convert react-querybuilder JSON into SQL, a MongoDB filter or JsonLogic. Paste a saved query, pick a dialect, copy the result. Free and runs in your browser.
- [RAQB to SQL](https://coss.com/qnot/tools/raqb-to-sql): Convert a react-awesome-query-builder (RAQB) JSON tree into SQL, a MongoDB filter or JsonLogic without its config. Free, client-side, nothing is uploaded.