https://github.com/dalibo/pev2
Postgres Explain Visualizer 2
https://github.com/dalibo/pev2
explain postgresql
Last synced: about 2 months ago
JSON representation
Postgres Explain Visualizer 2
- Host: GitHub
- URL: https://github.com/dalibo/pev2
- Owner: dalibo
- License: postgresql
- Created: 2019-08-05T07:00:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-05-05T07:19:44.000Z (10 months ago)
- Last Synced: 2025-05-05T08:27:50.363Z (10 months ago)
- Topics: explain, postgresql
- Language: TypeScript
- Homepage: https://explain.dalibo.com
- Size: 8.62 MB
- Stars: 2,904
- Watchers: 29
- Forks: 146
- Open Issues: 81
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-repositories - dalibo/pev2 - Postgres Explain Visualizer 2 (TypeScript)
- awesome-db-tools - pev2 - A Vue.js component to show a graphical vizualization of a PostgreSQL execution plan. (SQL / Plan)
- awesome-postgres-with-stars - PEV2 - 01-28 | (Optimization)
README
PEV2: A VueJS component to show a graphical vizualization of a PostgreSQL execution
plan.
# Usage
To use the explain vizualizer you can choose one of the following options:
## Dalibo service (recommended)
[explain.dalibo.com](https://explain.dalibo.com)
This service is provided by `Dalibo` and can help you to share your plans with
colleagues or customers.
## All-in-one local (no installation, no network)
PEV2 can be run locally without any external internet resource.
Simply download
[pev2.html](https://www.github.com/dalibo/pev2/releases/latest/download/pev2.html),
open it in your favorite internet browser.
## Integrated in a web application
### Without building tools
```html
const { createApp } = Vue
const plan = `
Aggregate (cost=12.50..12.51 rows=1 width=8)
-> Seq Scan on employees (cost=0.00..10.00 rows=1000 width=0)
`;
const app = createApp({
data() {
return {
plan: plan,
}
},
})
app.component("pev2", pev2.Plan)
app.mount("#app")
```
[See it live](https://stackblitz.com/edit/pev2-vanilla).
### With build tools
PEV2 can be integrated as a component in a web application.
Install it:
```
npm install pev2
```
Declare the `PEV2` component and use it:
```javascript
import { Plan } from "pev2"
import "pev2/dist/pev2.css"
export default {
name: "PEV2 example",
components: {
pev2: Plan,
},
data() {
return {
plan: plan,
query: query,
}
},
}
```
Then add the `PEV2` component to your template:
```html
```
`PEV2` requires `Bootstrap (CSS)` to work so don't forget to
add the following in you header (or load them with your favorite bundler).
```html
```
[See it live](https://stackblitz.com/edit/pev2-vite).
# Disclaimer
This project is a rewrite of the excellent [Postgres Explain Visualizer
(pev)][pev]. Kudos go to [Alex Tatiyants][atatiyan].
The [pev][pev] project was initialy written in early 2016 but seems to be
abandoned since then. There was no activity at all for more than 3 years and
counting though there are several issues open and relevant pull requests
pending.
[pev]: https://github.com/AlexTatiyants/pev
[atatiyan]: https://github.com/AlexTatiyants
[demo]: https://dalibo.github.io/pev2
[explain.dali.bo]: https://explain.dalibo.com