PEV2: a Vue component for reading PostgreSQL EXPLAIN plans

What PEV2 solves, and who actually needs it

A PostgreSQL execution plan is a tree of nodes printed as indented text. Reading it means counting indentation levels, matching costs to the parent node, and holding several nested loops in your head at once. PEV2 renders that tree as a graphical structure you can expand and collapse, so the parent-child relationship is visible instead of inferred from whitespace.

The README frames the project narrowly: it is "a VueJS component to show a graphical vizualization of a PostgreSQL execution plan". That wording matters. PEV2 is not a database tool, a profiler or a monitoring agent. It does not connect to PostgreSQL, it does not run EXPLAIN for you, and it does not store anything. You produce the plan, usually with EXPLAIN (ANALYZE, FORMAT JSON), and hand the JSON to the component. The audience is therefore developers and DBAs who already know how to obtain a plan and want a better way to look at one, or to show it to a colleague who does not.

The project is a rewrite of Alex Tatiyants' Postgres Explain Visualizer. The README states that the original pev was initially written in early 2016 and "seems to be abandoned since then", with no activity for more than three years. PEV2 exists because that earlier tool stopped moving. The replacement is maintained by Dalibo and the last push to the repository was on 2026-09-10.

The three deployment shapes and what each one costs you

The README lists three options, and they are genuinely different products from an operational standpoint.

The first is the hosted service at explain.dalibo.com, which the README calls the recommended option and describes as a way to "share your plans with colleagues or customers". Sharing implies the plan leaves your machine, so anything sensitive in the query text or the plan itself goes with it. That is a policy question, not a technical one, but it is the first thing to settle.

The second is the all-in-one local file. The README says PEV2 "can be run locally without any external internet resource" and that you simply download pev2.html from the latest release and open it in a browser. This is the option that keeps the plan on your laptop. It is also the one most likely to be overlooked, because it is buried below the hosted service in the README.

The third is embedding the component in a web application, either through a script tag with Vue and Bootstrap loaded from unpkg, or through a bundler with npm install pev2. The README gives working examples for both, including a live StackBlitz for each. This is the option that costs the most to adopt and the one that produces the most value if you already have an internal tool where plans belong.

How the component receives a plan and renders it

The data flow is short. You pass a plan as a string through a prop, and the component parses and draws it. The README's inline example uses three props: plan-source, plan-query and plan-comment. The plan-source prop holds the raw plan text, plan-query holds the SQL that produced it, and plan-comment is a free-text field the README demonstrates with the string "Uses the production work_mem setting". That comment field is a small but real feature: it lets you record the server configuration a plan was captured under, which is often the difference between two plans that look contradictory.

Under the hood the package is a Vue 3 component library built with Vite. The package.json declares main, module and types entry points, and exports the stylesheet separately as ./dist/pev2.css. The rendering stack named in the dependencies includes d3 and d3-flextree. d3-flextree is a layout algorithm for trees of variable node size, which is consistent with the visual result: nodes sized to their content and arranged so that no two overlap. The dependency list also includes highlight.js, which is what colors the SQL in the query panel, and the Font Awesome packages, which supply the node icons.

One consequence of this architecture is that the component is a pure function of its props. There is no fetch, no websocket, no background polling. If the plan changes, you re-render with a new prop value. That makes it easy to embed and easy to test, and it also means PEV2 will never tell you that a plan changed.

Installing PEV2 and rendering your first plan

For an application built with a bundler, the README's instruction is a single npm install. Run it in your project root:

npm install pev2

Then import the component and its stylesheet, and register it. The README shows the component imported as Plan and registered under the name pev2:

import { Plan } from "pev2"
import "pev2/dist/pev2.css"

export default {
  name: "PEV2 example",
  components: {
    pev2: Plan,
  },
  data() {
    return {
      plan: plan,
      comment: "Uses the production work_mem setting",
      query: query,
    }
  },
}

In the template, the three props are bound to those data fields. The README's markup is:

<div id="app">
  <pev2 :plan-source="plan" :plan-query="query" :plan-comment="comment"></pev2>
</div>

The README is explicit that "PEV2 requires Bootstrap (CSS) to work", so the Bootstrap 5 stylesheet must be present in the page header, either from a CDN or through your bundler. If it is missing, the layout will not look like the screenshots. For a quick check without any build step, the README also documents a script-tag version that loads Vue 3, pev2.umd.js and pev2.css from unpkg, with a plan supplied as a template literal. That example uses a short two-node plan (an Aggregate over a Seq Scan on employees) and is the fastest way to confirm the component renders before wiring it into a real application.

Where PEV2 stops being the right tool

The most important limitation is the one the README states indirectly: PEV2 is a viewer. It has no notion of plan history, no comparison between two plans, and no alerting. If you want to know whether a query got slower after a deployment, PEV2 will show you each plan but will not tell you which one regressed.

The second limitation is the input format. The README's examples pass plan text, and the component's purpose is a graphical rendering of a plan, but the README does not document what happens when you feed it the plain-text output of EXPLAIN without FORMAT JSON. The README is silent on error handling and on which plan formats are accepted, so this is something to verify against your own data before committing to it.

The third is the Bootstrap dependency. Requiring a full CSS framework for a component that draws a tree is a real constraint. If your application already uses a different design system, you are adding Bootstrap's stylesheet to the page for one component, and you inherit whatever global styles it sets. The README treats this as a given rather than a trade-off, and does not describe a way to scope or replace it.

Finally, there is the sharing question. The hosted service is convenient, but a plan contains query text and, with ANALYZE, actual row counts and timings from your data. Teams in regulated environments will want the local HTML file or a self-hosted embedding instead, and should decide that before the first plan is pasted into a browser tab.

PEV2 against the pev it replaced, and against doing nothing

The obvious alternative is the original Postgres Explain Visualizer, and the README is unusually direct about the comparison. It calls pev "excellent" and credits Alex Tatiyants, then states that the project "seems to be abandoned since then", with no activity for more than three years and open issues and pull requests pending. The practical difference is not the feature list, it is the stack and the maintenance. PEV2 is a Vue 3 and TypeScript project with a Vite build, a Vitest suite, a Playwright visual test suite and ESLint and Prettier configuration in the repository root. pev was a different generation of front-end tooling. If you are embedding a plan viewer in a modern application, PEV2 is the one that matches your build.

The other alternative is not a tool at all: reading the text output. That is free and requires nothing installed, and for a five-node plan it is often faster than opening a browser. PEV2 earns its place on plans with dozens of nodes, on plans you need to explain to someone else, and on plans you want to attach to a bug report or a code review. Below that threshold, the component is overhead.

Maintenance, licensing and what upgrading involves

The repository is not archived, and the last push was on 2026-09-10. Releases are frequent and versioned: v1.22.0 on 2026-06-18, v1.23.0 on 2026-07-20 and v1.24.0 on 2026-09-10. The package.json version matches the latest tag at 1.24.0.

The upgrade cost is mostly the peer environment rather than PEV2 itself. The dependencies listed in package.json are caret-ranged, including bootstrap ^5.3.8, d3 ^7.9.0 and the Vue Font Awesome packages. Because the component renders into your page and requires Bootstrap CSS, a major Bootstrap change would reach you through this dependency. The repository's own test setup gives a hint about how the maintainers guard against visual regressions: the package scripts include test:visual:run, which starts a pinned Playwright container image and runs the visual test suite against snapshots. That is a meaningful signal for a component whose main output is a drawing.

On licensing, the package.json declares "PostgreSQL license", which is a permissive licence in the same family as MIT and BSD. The README does not discuss licence obligations for the hosted service or for the bundled fonts and icons, and the dependency list includes Font Awesome packages whose own licensing is separate. That is worth checking with whoever handles licensing at your organisation; this article is not legal advice.

Editorial conclusion

PEV2 fits teams that already read EXPLAIN output and want a shared, clickable view of a plan inside their own web application or as a single downloaded HTML file. It is the wrong tool if you need a hosted service that stores plan history, because the README describes no persistence layer beyond the Dalibo service. Before adopting it, check that your plan is JSON from EXPLAIN (FORMAT JSON) and not the text format, and confirm the Bootstrap 5 stylesheet is loaded, since the README states PEV2 requires Bootstrap CSS to work.

Frequently asked questions

Official sources

1. dalibo/pev2 on GitHub
2. License: PostgreSQL
3. Project website
4. README
5. Releases