Query Builder | Zyeon UI

Preview in your theme

fields = select / string / number / date / boolean · one nested OR group · the JSON below is the value the component hands back (edit any row and it changes)

match all

match any

Generated expression

plan = 'pro' AND mrr >= 500 AND (email LIKE '%@acme.com' OR signed_up_at > '2026-01-01') AND trialing = FALSE

onChange value · 5 conditions · 109 chars of expression

{
  "id": "root",
  "combinator": "and",
  "rules": [
    {
      "id": "c1",
      "field": "plan",
      "operator": "equals",
      "value": "pro"
    },
    {
      "id": "c2",
      "field": "mrr",
      "operator": "gte",
      "value": "500"
    },
    {
      "id": "g1",
      "combinator": "or",
      "rules": [
        {
          "id": "c3",
          "field": "email",
          "operator": "endsWith",
          "value": "@acme.com"
        },
        {
          "id": "c4",
          "field": "signed_up_at",
          "operator": "after",
          "value": "2026-01-01"
        }
      ]
    },
    {
      "id": "c5",
      "field": "trialing",
      "operator": "is",
      "value": false
    }
  ]
}

value.rules = [] → the empty state reads "Add your first condition", and the expression bar spells out that no conditions means everything matches

match all

Add your first condition

Generated expression

— no conditions, everything matches —

maxDepth={2}: the root group (level 1) can still add groups, but inside a second-level group both Add group and the per-row wrap-in-group are disabled

match all

match any

and

Generated expression

plan <> 'free' AND (mrr BETWEEN 100 AND 500 OR seats > 20)

Three levels deep (the default maxDepth = 3, so this is the floor): indentation plus a rule line marks the nesting; on narrow screens the innermost rows are not squeezed — the whole tree gets its own horizontal scrollbar

match all

match any

match all

Generated expression

plan = 'enterprise' AND (email LIKE '%acme%' OR (mrr > 1000 AND signed_up_at <= '2026-06-30'))

disabled: a read-only render — every select / input / button is disabled and onChange is never called; showExpression={false} drops the expression bar

match any

no value needed

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro

{ "id": "root", "combinator": "and", "rules": [ { "id": "c1", "field": "plan", "operator": "equals", "value": "pro" }, { "id": "c2", "field": "mrr", "operator": "gte", "value": "500" }, { "id": "g1", "combinator": "or", "rules": [ { "id": "c3", "field": "email", "operator": "endsWith", "value": "@acme.com" }, { "id": "c4", "field": "signed_up_at", "operator": "after", "value": "2026-01-01" } ] }, { "id": "c5", "field": "trialing", "operator": "is", "value": false } ] }