Essential JS 2 QueryBuilder for React

Usage no npm install needed!

<script type="module">
  import syncfusionEj2ReactQuerybuilder from 'https://cdn.skypack.dev/@syncfusion/ej2-react-querybuilder';



The React Query Builder is a rich and responsive UI for filtering large amounts of data by creating or editing conditions that can be combined with data visualization controls like DataGrid and Charts to view the filtered data. It outputs structured JSON filters that can be easily parsed to create SQL queries. It allows you to create conditions and group them using AND/OR logic.


This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.


To install QueryBuilder and its dependent packages, use the following command

npm install @syncfusion/ej2-react-querybuilder

Components included

Following list of components are available in the package.

  • QueryBuilder - QueryBuilder Query Builder component is a graphical user interface that allows users to create and edit filters. It outputs a structured JSON of filters that can be easily parsed to create SQL. It is integrated with Data Manager to communicate with data sources and returns the desired result based on the provided filter. It supports data binding, templates, validation, and horizontal and vertical orientation.

Supported Frameworks

These components are available in following list of frameworks.

  1. Angular Query Builder
  2. Vue Query Builder
  3. JavaScript Query Builder
  4. ASP.NET Core Query Builder
  5. ASP.NET MVC Query Builder

Key Features


  • Data binding: It auto populates the data source and maps the data to the appropriate fields.

  • Template: Supports templates and it is applicable for all input components.

  • Queries: Queries supports JSON/SQL rules.


Product support is available for through following mediums.


Check the license detail here.


Check the changelog here

© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.