{"id":21295,"library":"esbuild-visualizer","title":"esbuild-visualizer","description":"Visualize and analyze your esbuild bundle to determine module sizes and composition. Current stable version is 0.7.0, with irregular release cadence. Generates interactive HTML charts (treemap, sunburst, network) from esbuild metafiles. Key differentiator: works specifically with esbuild's metadata output, producing visual bundle analysis without including source code content. Requires Node >=18, ships TypeScript types. Alternative to webpack-bundle-analyzer for esbuild users.","status":"active","version":"0.7.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/btd/esbuild-visualizer","tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-visualizer","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-visualizer","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-visualizer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires esbuild's metadata output (--metafile flag) to generate visualizations.","package":"esbuild","optional":true}],"imports":[{"note":"The package exposes a named export 'visualizer', not a default export.","wrong":"import visualizer from 'esbuild-visualizer'","symbol":"visualizer","correct":"import { visualizer } from 'esbuild-visualizer'"},{"note":"CommonJS require must destructure the named export.","wrong":"const visualizer = require('esbuild-visualizer')","symbol":"visualizer","correct":"const { visualizer } = require('esbuild-visualizer')"},{"note":"TypeScript users should use `import type` to avoid runtime import if not needed.","wrong":"import { VisualizerOptions } from 'esbuild-visualizer'","symbol":"type VisualizerOptions","correct":"import type { VisualizerOptions } from 'esbuild-visualizer'"},{"note":"Options are passed as an object argument, not imported.","wrong":"import { metafile } from 'esbuild-visualizer'","symbol":"metafileName","correct":"// Not imported; usage: visualizer({ metafile: './meta.json', ... })"}],"quickstart":{"code":"import { visualizer } from 'esbuild-visualizer';\nimport { build } from 'esbuild';\n\nasync function analyze() {\n  const result = await build({\n    entryPoints: ['app.ts'],\n    bundle: true,\n    outfile: 'out.js',\n    metafile: true,\n  });\n\n  // Write metafile to disk\n  const fs = await import('fs');\n  fs.writeFileSync('meta.json', JSON.stringify(result.metafile));\n\n  await visualizer({\n    metafile: 'meta.json',\n    filename: 'stats.html',\n    title: 'My Bundle Analysis',\n    template: 'treemap',  // 'treemap', 'sunburst', or 'network'\n  });\n\n  console.log('Visualization generated at stats.html');\n}\n\nanalyze().catch(console.error);","lang":"typescript","description":"Builds an esbuild bundle with metafile, then generates an interactive treemap visualization HTML file."},"warnings":[{"fix":"Ensure the input JSON is produced by esbuild with { metafile: true } or the --metafile CLI flag.","message":"The visualizer function only works with esbuild metafiles (--metafile flag). If you pass a non-esbuild JSON, it will fail.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use { metafile: ... } instead of { metadata: ... }.","message":"Option 'metadata' (misspelled) was deprecated in v0.4.0 and removed in v0.5.0. Use 'metafile' instead.","severity":"deprecated","affected_versions":">=0.4.0 <0.5.0"},{"fix":"Review the generated stats.html before sharing; it contains statistical data but not source content.","message":"Generated HTML files do not contain source code, but they do include file paths and sizes. Avoid exposing these files if filesystem layout is sensitive.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use Node 18 or later.","message":"The CLI command 'esbuild-visualizer' requires Node >=18. On older Node versions, it will fail to run.","severity":"gotcha","affected_versions":">=0.6.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Verify the metafile path: visualizer({ metafile: './meta.json' }) after running esbuild with metafile: true.","cause":"The metafile path provided does not exist or is incorrect.","error":"Error: Could not find file: /path/to/meta.json"},{"fix":"Use: import { visualizer } from 'esbuild-visualizer';","cause":"The visualizer is not imported correctly; default import was used instead of named import.","error":"TypeError: visualizer is not a function"},{"fix":"Use one of: 'treemap', 'sunburst', 'network'.","cause":"An invalid template name was passed.","error":"Error: Unknown template 'circlepacking'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}