Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
showPlan
✓ import { showPlan } from 'kburtram-query-plan';
✗ import QP from 'kburtram-query-plan';
The package ships TypeScript types but exports a named function `showPlan`. The global `QP` object is only available via script tag, not ES import.
drawLines
✓ import { drawLines } from 'kburtram-query-plan';
✗ require('kburtram-query-plan').drawLines;
drawLines is used for pre-rendered XSLT output; it's exported as a named function.
QP
✓ const QP = window.QP;
✗ import { QP } from 'kburtram-query-plan';
The global `QP` is not available in ES module builds; use script tags for that API (showPlan, drawLines).
Renders a minimal SQL Server execution plan (Clustered Index Scan) in a div using html-query-plan with CSS and JS files from 'kburtram-query-plan' npm package.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" href="node_modules/kburtram-query-plan/dist/qp.css"> <script src="node_modules/kburtram-query-plan/dist/qp.min.js"></script></head>
<body> <div id="planContainer"></div> <script> const queryPlanXml = `<?xml version="1.0"?><ShowPlanXML xmlns="http://schemas.microsoft.com/sqlserver/2004/07/showplan"> <BatchSequence> <Batch> <Statements> <StmtSimple StatementCompId="1" StatementEstRows="1" StatementSubTreeCost="0.0032831"> <QueryPlan> <RelOp NodeId="0" PhysicalOp="Clustered Index Scan" LogicalOp="Clustered Index Scan" EstimateRows="1" EstimateIO="0.003125" EstimateCPU="0.0001581" AvgRowSize="15" EstimatedTotalSubtreeCost="0.0032831" Parallel="0" EstimateRebinds="0" EstimateRewinds="0" EstimatedExecutionMode="Row"> <OutputList> <ColumnReference Database="[AdventureWorks]" Schema="[dbo]" Table="[Test]" Column="Id"/> <ColumnReference Database="[AdventureWorks]" Schema="[dbo]" Table="[Test]" Column="Name"/> </OutputList> <RunTimeInformation> <RunTimeCountersPerThread Thread="0" ActualRows="1" ActualEndOfScans="1" ActualExecutions="1"/> </RunTimeInformation> <IndexScan Ordered="0" ScanDirection="FORWARD"> <DefinedValues> <DefinedValue> <ColumnReference Database="[AdventureWorks]" Schema="[dbo]" Table="[Test]" Column="Id"/> </DefinedValue> <DefinedValue> <ColumnReference Database="[AdventureWorks]" Schema="[dbo]" Table="[Test]" Column="Name"/> </DefinedValue> </DefinedValues> </IndexScan> </RelOp> </QueryPlan> </StmtSimple> </Statements> </Batch> </BatchSequence></ShowPlanXML>`; QP.showPlan(document.getElementById('planContainer'), queryPlanXml); </script></body>
</html>
Errors
Common errors & fixes
Uncaught TypeError: QP.showPlan is not a function
Importing from npm package incorrectly; QP is not a default export.
fixUse script tag from dist/qp.min.js instead of npm import, or import { showPlan } from 'kburtram-query-plan' and call showPlan() directly. Cannot find module './qp.xslt'
Trying to use xslt file without including it in bundle or deploying separately.
fixCopy qp.xslt from GitHub release to your project and ensure it's served alongside the HTML.
The query plan XML is not valid ShowPlanXML format.
XML string passed to showPlan() is missing proper namespace or root element.
fixVerify XML contains <ShowPlanXML xmlns="http://schemas.microsoft.com/sqlserver/2004/07/showplan"> and valid plan content.
Audit
Dependencies
No dependency data recorded yet.