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

Does it work with SolidStart?

Yes. The package ships source through the solid export condition, which vite-plugin-solid (and so SolidStart) compiles for the client and the server. The default builder renders with Solid's renderToString (we checked it), and server functions can import the same fields.ts to validate the query and turn it into SQL.

Yes. useRule(id) returns separate accessors for the rule, its field, operator, value, issues and permissions, so an editor that reads only value() re-runs only when the value changes.

Can I use it next to React in one Vite app?

Yes, with the usual care: limit each JSX plugin to its own files with include / exclude. The qnot store is plain TypeScript and can be shared between the two.

Can I write my own components?

Yes. Pass components to replace single pieces of the default builder, or build your own from useGroup, useRule, useNode and the drag primitives (useDragHandle, useDropTarget, useGroupDropZone).

Which export formats are there?

SQL in five dialects with bound parameters, MongoDB, JsonLogic, Elasticsearch, SpEL and plain English, plus two-way JSON for react-querybuilder, react-awesome-query-builder and jQuery QueryBuilder. Each codec is its own import, so you bundle only what you use.

Solid query builder

An open-source query builder for SolidJS. Fine-grained primitives over one store, with undo, drag and drop, validation and export to SQL, MongoDB and JsonLogic.

Solid guide

MIT · SolidJS · fine-grained · TypeScript

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

installpnpm add @qnot/core @qnot/solid

A Solid 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.tsx

import '@qnot/core/styles.css';
import { encode } from '@qnot/core';
import { sqlFormat } from '@qnot/core/formats/sql';
import { QueryBuilder } from '@qnot/solid';
import { createMemo, createSignal } from 'solid-js';
import { fields, initial } from './fields';

const pg = sqlFormat({ dialect: 'postgres', params: 'numbered' });

export function Filters() {
  const [query, setQuery] = createSignal(initial);
  // { sql: 'age >= $1 AND plan IN ($2, $3) AND …', params: [21, 'pro', 'team', …] }
  const where = createMemo(() => encode(pg, query(), fields));
  return (
    <>
      <QueryBuilder fields={fields} value={query()} onChange={setQuery} showLock />
      <pre>{where().sql}</pre>
    </>
  );
}

For more control, create the store with useQueryStore, share it with <QueryProvider>, and read it with useQuery, useHistory or useIsValid. Each primitive subscribes to one node of the store, which suits Solid's fine-grained updates.

The default builder takes components, labels and class. See the Solid guide.

What you get.

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

How it compares.

Without a Solid-native builder, the options are a framework-free library or one embedded from another framework. Below, those against qnot's framework-free build on the same 1,000-rule tree. The Solid binding has its own numbers.

Questions people ask

Is it free?: Yes. @qnot/solid and @qnot/core are MIT licensed. No license key, no paid tier.
Does it work with SolidStart?: Yes. The package ships source through the solid export condition, which vite-plugin-solid (and so SolidStart) compiles for the client and the server. The default builder renders with Solid's renderToString (we checked it), and server functions can import the same fields.ts to validate the query and turn it into SQL.Server usage
Is it fine-grained?: Yes. useRule(id) returns separate accessors for the rule, its field, operator, value, issues and permissions, so an editor that reads only value() re-runs only when the value changes.
Can I use it next to React in one Vite app?: Yes, with the usual care: limit each JSX plugin to its own files with include / exclude. The qnot store is plain TypeScript and can be shared between the two.Solid guide
Can I write my own components?: Yes. Pass components to replace single pieces of the default builder, or build your own from useGroup, useRule, useNode and the drag primitives (useDragHandle, useDropTarget, useGroupDropZone).
Which export formats are there?: SQL in five dialects with bound parameters, MongoDB, JsonLogic, Elasticsearch, SpEL and plain English, plus two-way JSON for react-querybuilder, react-awesome-query-builder and jQuery QueryBuilder. Each codec is its own import, so you bundle only what you use.Formats