Webdev Filter Query Builder

Build advanced filter query interfaces with structured AST representation, operators, and serialization for production tools.

Prerequisites

This skill builds on webdev-token-input and webdev-combobox-autocomplete. Understand token state, keyboard navigation, and the prop-getter pattern first.

Production Tool Paradigms

Analyzing Datadog, Grafana, Honeycomb, Linear, and GitHub reveals two dominant approaches that inform your architecture decisions:

Text-Based Query Builders (Datadog, Kibana, Sentry, GitHub)

Use colon as the delimiter—typing status: triggers value suggestions, and completing the value creates a visual token.

Datadog's "search pills" with syntax highlighting enable power users to edit any part of a query inline—click anywhere in service:payment AND status:error to modify it. This text-first approach treats the query string as the source of truth, with visual tokens as a rendering layer.

Benefits: Fast keyboard-only flow, copy/paste queries as text, syntax highlighting, inline editing anywhere