Home▸Computer Science▸SemVer Dependency Resolver (2D)

SemVer Dependency Resolver (2D)

Interactive 2D dependency graph showing how npm-style semantic-version range resolution (caret, tilde, exact) picks a version per package, dedupes a shared dependency, or falls back to nested installs when ranges conflict. Drag to pan, scroll to zoom.

Computer Science2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-mobile-versioning-strategies ↗ Open standalone

Three consumer packages each declare a semantic-version range against a shared library D. This simulator runs the same range-matching algorithm real package managers use — caret, tilde and exact ranges compared against SemVer precedence over a small published registry — to find, for each consumer, the highest version that satisfies its requirement. When all three agree, the dependency graph dedupes to one shared install; when they disagree, it either reports a conflict or falls back to nested per-consumer copies, exactly as npm/yarn resolution trees do in a real mobile build. This 2D sibling renders the identical resolution logic as a flat, pannable/zoomable node graph instead of an orbiting 3D scene.

⚙ Under the hood

A 2D pannable/zoomable node graph running the same npm-style semantic-version resolution algorithm as its 3D sibling: caret, tilde and exact ranges are matched against a live registry to find each consumer package's highest-satisfying version of a shared dependency D, deduping to one shared install when all three agree, or falling back to nested per-consumer copies (or a strict-mode conflict) when they don't.

semantic versioningsemverdependency resolutionnpmpackage managermobile developmentcomputer sciencegraph visualization

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)