Skip to main content
Version: v7 / v8

Buildless

React Query Builder can be used directly in the browser without a build step using ESM. Babel can be used to parse JSX in a script tag.

Basic example​

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Query Builder ESM</title>
    <link rel="stylesheet" href="https://esm.sh/react-querybuilder@latest/dist/query-builder.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@latest",
          "react-dom/": "https://esm.sh/react-dom@latest/",
          "react-querybuilder": "https://esm.sh/react-querybuilder@latest"
        }
      }
    </script>
    <script type="module">
      import * as React from 'react';
      import { createRoot } from 'react-dom/client';
      import { QueryBuilder } from 'react-querybuilder';

      const fields = [
        { name: 'firstName', label: 'First Name' },
        { name: 'lastName', label: 'Last Name' },
      ];

      const defaultQuery = {
        combinator: 'and',
        rules: [
          { field: 'firstName', operator: 'beginsWith', value: 'Stev' },
          { field: 'lastName', operator: 'in', value: 'Vai,Vaughan' },
        ],
      };

      createRoot(document.getElementById('root')).render(
        React.createElement(QueryBuilder, { fields, defaultQuery })
      );
    </script>
  </body>
</html>

Drag-and-drop example​

To add drag-and-drop capability, import react-dnd, react-dnd-html5-backend, and @react-querybuilder/dnd. Nest <QueryBuilder /> inside <QueryBuilderDnD /> and spread the react-dnd* exports to the dnd prop.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Query Builder ESM (DnD)</title>
    <link rel="stylesheet" href="https://esm.sh/react-querybuilder@latest/dist/query-builder.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@latest",
          "react-dom/": "https://esm.sh/react-dom@latest/",
          "react-querybuilder": "https://esm.sh/react-querybuilder@latest",
          "@react-querybuilder/dnd": "https://esm.sh/@react-querybuilder/dnd@latest",
          "react-dnd": "https://esm.sh/react-dnd@latest",
          "react-dnd-html5-backend": "https://esm.sh/react-dnd-html5-backend@latest"
        }
      }
    </script>
    <script type="module">
      import * as React from 'react';
      import { createRoot } from 'react-dom/client';
      import { QueryBuilder } from 'react-querybuilder';
      import * as ReactDnD from 'react-dnd';
      import * as ReactDndHtml5Backend from 'react-dnd-html5-backend';
      import { QueryBuilderDnD } from '@react-querybuilder/dnd';

      const fields = [
        { name: 'firstName', label: 'First Name' },
        { name: 'lastName', label: 'Last Name' },
      ];

      const defaultQuery = {
        combinator: 'and',
        rules: [
          { field: 'firstName', operator: 'beginsWith', value: 'Stev' },
          { field: 'lastName', operator: 'in', value: 'Vai,Vaughan' },
        ],
      };

      createRoot(document.getElementById('root')).render(
        React.createElement(QueryBuilderDnD, {
          dnd: { ...ReactDnD, ...ReactDndHtml5Backend },
          children: [React.createElement(QueryBuilder, { fields, defaultQuery })],
        })
      );
    </script>
  </body>
</html>