React Query Builder

An open source React component for building user friendly queries and filters. Let users edit rules visually or in SQL text mode, validate input, and convert queries to SQL, MongoDB, Prisma, and other supported formats.

Try the live demo Get started

Install

Add the package and continue with the setup guide in the documentation.

npm install @vojtechportes/react-query-builder

Build and convert complex queries

Configure fields and editing behavior, let users build queries visually or as text, and convert the result for your API or database.

Add the query builder to your app

Define fields, manage query state, validate input, and control how users edit each query.

Read the usage guide

Convert queries for your stack

Convert query data to and from SQL, MongoDB, Prisma, Elasticsearch, OData, RSQL, and other supported formats.

View supported formats

Edit queries visually or as text

Let users switch between the visual builder and SQL text mode while validation and protected query segments remain in place.

Explore text mode

Loading the text mode query builder...

Match your design system

Use the default components or ready-made adapters for MUI, Ant Design, Bootstrap, Mantine, Fluent UI, and Radix Themes.

See more UI adapters

Loading the MUI query builder...

Create a controlled builder

Define the fields your users can filter, keep query data in React state, and choose when to format or send the validated filter to your API.

Read the installation guide

React Query Builder TypeScript example

import { useState } from 'react';
import {
  Builder,
  type DenormalizedQuery,
  type IBuilderFieldProps,
} from '@vojtechportes/react-query-builder';
import '@vojtechportes/react-query-builder/styles.css';

const fields: IBuilderFieldProps[] = [
  { field: 'name', label: 'Product name', type: 'TEXT' },
  { field: 'price', label: 'Price', type: 'NUMBER' },
];

export const ProductFilter = () => {
  const [data, setData] = useState<DenormalizedQuery>([]);

  return <Builder fields={fields} data={data} onChange={setData} />;
};

Use it in real applications

Follow complete recipes for tables, forms, URLs, databases, and server-side filtering.

Browse all recipes