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 'html-query-plan'
✗ const QP = require('html-query-plan')
ESM-only. The library does not export a default; use named import.
drawLines
✓ import { drawLines } from 'html-query-plan'
✗ import drawLines from 'html-query-plan'
drawLines is a named export, not default.
ShowPlanOptions
✓ import type { ShowPlanOptions } from 'html-query-plan'
TypeScript type available for the options object.
Renders a SQL Server execution plan XML into an HTML container with interactive diagrams and tooltips.
import { showPlan } from 'html-query-plan';
const planXml = `<?xml version="1.0"?>
<ShowPlanXML xmlns="http://schemas.microsoft.com/sqlserver/2004/07/showplan">
<BatchSequence>
<Batch>
<Statements>
<StmtSimple StatementText="SELECT * FROM [SalesLT].[Product] WHERE [ListPrice] > 1000" StatementId="1" StatementCompId="1" StatementType="SELECT" StatementSubType="" StatementEstRows="12.345" SecurityPolicyApplied="false">
<QueryPlan DegreeOfParallelism="0" CachedPlanSize="16" CompileTime="2" CompileCPU="1" CompileMemory="88">
<RelOp NodeId="0" PhysicalOp="Clustered Index Scan" LogicalOp="Clustered Index Scan" EstimateRows="12.345" EstimateIO="0.01" EstimateCPU="0.01" AvgRowSize="200" EstimatedTotalSubtreeCost="0.02" Parallel="0" EstimateRebinds="0" EstimateRewinds="0" EstimatedExecutionMode="Row">
<OutputList>
<ColumnReference Database="[AdventureWorksLT2008]" Schema="[SalesLT]" Table="[Product]" Column="*" />
</OutputList>
<RunTimeInformation>
<RunTimeCountersPerThread Thread="0" ActualRows="12" ActualEndOfScans="1" ActualRebinds="0" ActualRewinds="0" />
</RunTimeInformation>
<IndexScan Lookup="0">
<DefinedValues>
<DefinedValue>
<ColumnReference Database="[AdventureWorksLT2008]" Schema="[SalesLT]" Table="[Product]" Column="*" />
</DefinedValue>
</DefinedValues>
<Object Database="[AdventureWorksLT2008]" Schema="[SalesLT]" Table="[Product]" Index="[PK_Product_ProductID]" Alias="[Product]" IndexKind="Clustered" Storage="RowStore" />
</IndexScan>
</RelOp>
</QueryPlan>
</StmtSimple>
</Statements>
</Batch>
</BatchSequence>
</ShowPlanXML>`;
const container = document.getElementById('planContainer');
if (container) {
showPlan(container, planXml);
} else {
console.error('Container element not found');
}
Errors
Common errors & fixes
Uncaught ReferenceError: QP is not defined
Using the legacy global `QP` object without importing the library as a module.
fixUse `import { showPlan } from 'html-query-plan'` instead of relying on the global `QP`. Cannot find module 'html-query-plan' or its corresponding type declarations.
Missing or incorrect TypeScript configuration or the library is not installed.
fixRun `npm install html-query-plan` and ensure tsconfig.json includes `"moduleResolution": "node"`.
Failed to parse XML: The document is not well-formed.
The execution plan XML provided is invalid or incomplete.
fixEnsure the XML is a valid ShowPlanXML string with proper encoding and no byte order marks.
Audit
Dependencies
No dependency data recorded yet.