Query builder
A filter rule builder with field, operator and type-aware value rows, AND/OR groups nested one level, a live readable summary and JSON output.
Preview
Matchof these rules
- Where
- Matchof
- Where
- Where
- and
Showing Status is Active AND (Plan is any of Team, Scale OR Seats > 25 seats) AND Signed up is between 2026-01-01 and 2026-03-31
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | QueryField[] | — | Fields as { name, label, type: "text" | "number" | "date" | "select" | "boolean", options?, unit? }. |
| value | QueryGroup | — | Controlled rule tree { id, combinator, rules }. |
| defaultValue | QueryGroup | empty AND group | Uncontrolled starting tree (bring your own ids). |
| onValueChange | (value: QueryGroup) => void | — | Called on every edit; use toQueryJSON for an id-free payload. |
| showJson | boolean | true | Show the JSON output toggle under the summary. |
| allowGroups | boolean | true | Allow one level of nested AND/OR groups. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.