I still remember my first steps with PromQL.
Even after I learned more about the available functions and the Prometheus data model, the queries just would not flow as quickly as I liked.
At Kausal, we believe making the writing of those queries easier will benefit the general adoption of Prometheus.
That is why we decided to make our PromQL query editor open source.

The editor comes with tab-completion for metric names, label keys, label values, ranges, etc.
It is now available as prom-editor
at our public mono-repo: https://github.com/kausalco/public, wrapped inside an example React application.
We previously wrote about Slate and Prism, the underlying editor libraries.
This blog post will dive a little deeper into the mechanics of the editor and its integration into an application.