Tiny Online Tools logoTiny Online ToolssearchSearch tools…grid_viewAll Tools
Homechevron_rightReverse Engineering Toolschevron_rightJS Bundle Dependency VisualizerJS Bundle Dependency Visualizer

JS Bundle Dependency Visualizer

Find module boundaries inside a webpack, Rollup, esbuild or Vite bundle and see which module requires which — using real AST shape-matching, not text guessing.

Bundle sourcePaste codeUpload file

Similar Tools

Webpack Bundle Inspector

Webpack Bundle Inspector

Detects webpack's runtime bootstrap, module map and chunk-push metadata by AST shape, shows each module's real source, and says plainly when a file is not webpack output.

Source Map Size Analyzer

Source Map Size Analyzer

Attribute a bundle's bytes to the original source files and folders that produced them, using its .map file — see what is actually taking up space.

WASM Import/Export Visualizer

WASM Import/Export Visualizer

See what a WebAssembly module needs from its host and what it offers back, grouped by module namespace, side by side.

JavaScript Dead Code Analyzer

JavaScript Dead Code Analyzer

Paste a JS bundle and find top-level functions with no static reference anywhere in the file — a heuristic reachability scan, not a certainty.

Tailwind Color Generator

Tailwind Color Generator

Generate a Tailwind-style color scale and config snippet from a base color.

3D Printability Checker

3D Printability Checker

Check whether an STL, 3MF, OBJ, PLY or STEP model is actually printable before you slice it.

Image Sharpen Tool

Image Sharpen Tool

Sharpen blurry photos in your browser with a precise convolution-based sharpening filter. Adjustable strength, fully private.

apps

More Tools

Browse our full collection of free online tools.

What this finds

Modern sites ship one JavaScript file built from hundreds of source files. This tool looks inside that file and tries to recover the original module boundaries — bundler-agnostic, using the actual AST shape rather than pattern-matching on text (which falls apart the moment the code is minified).

It tries, in order:

  1. Webpack function-map form — an IIFE whose argument is an object or array where each entry is a (module, exports, require) function. This also matches the classic webpackUniversalModuleDefinition wrapper, however deep the real module-map call sits inside it.
  2. Webpack chunk-push form — (self.webpackChunkXxx = self.webpackChunkXxx || []).push([ids, {modules}, runtime]), the shape webpack 5 code-splitting produces.
  3. Rollup / esbuild / Vite comment banners — some unminified builds from that family keep a // path/to/file.js line comment before each module's code. When present, those become the module boundaries.
  4. Honest fallback — if none of the above are found (almost always because the bundle is a scope-hoisted, minified Rollup/esbuild/Vite build with no boundary markers left at all), the tool says so and lists the file's top-level declarations instead of inventing a module list.

Reading the result

When modules are found, each one lists what it require()s by literal module id and, just as usefully, which other modules require it — so you can trace "if I remove this, what breaks" in either direction without executing anything.

Honesty by design

Dynamic requires (require(someVariable)) and import() calls cannot be resolved statically, so they are simply left out of the edge list — this can undercount dependencies, but it will never fabricate one. Likewise, a module id referenced by a require() call that isn't in the detected map is still shown as an edge target even though it has no card of its own; that usually means it lives in a different chunk that wasn't pasted in.

Privacy

Everything runs in your browser via a real JavaScript parser (acorn). The bundle you paste or upload is never sent anywhere.