Rule Engine Builder UI

screenshot of Rule Engine Builder UI

UI based on react awesome query builder to visualize rule building on rule engine

Overview

If you're looking for a way to seamlessly build queries and filters in your React applications, this user-friendly React component is designed to facilitate just that. Drawing inspiration from jQuery QueryBuilder, it combines elegance and functionality, ensuring that both novice and experienced developers can create complex query interfaces with relative ease. The component's integration with Ant Design v4 and the new support for Material-UI make it versatile enough to fit into a variety of projects.

With features that support a wide range of data types and operators, this tool enhances the way queries are constructed, offering a rich set of configurations and export options. Whether your project needs to interface with MongoDb, SQL, or other formats, this component can streamline the process for you.

Features

  • Highly Configurable: Support for various field types such as simple data (string, number, boolean) and complex structures displayed in a tree format enhances flexibility.
  • Diverse Comparison Operators: Choose from binary, unary, ‘between’, or complex operators for versatile query construction.
  • Drag-and-Drop Support: Easily reorder rules and groups of rules with intuitive drag-and-drop functionality.
  • Multiple Themes: Built-in support for Ant Design, Material-UI, Bootstrap, and the option to customize with your own UI framework.
  • Multiple Export Formats: Export query results to MongoDb, SQL, JsonLogic, SpEL, ElasticSearch, or a custom format tailored to your needs.
  • TypeScript Support: Comprehensive TypeScript support with detailed types and demos to aid in development.
  • Live Demo and Rapid Development: Quick start with demo apps that include hot reload support, for both TypeScript and JavaScript environments.