DevTool · Visualization · Code Intelligence
Anomaly
Codebase X-Ray & Visual Intelligence Platform — drop a folder or paste a GitHub URL and instantly see an interactive Obsidian-style force graph of every file, import, and function.
Next.js
TypeScript
D3.js
HTML5 Canvas
Babel AST
Tailwind CSS
Vercel
Overview
Anomaly parses entire codebases in the browser and renders an interactive force-directed graph showing every file, every import, and every function. Load code via drag-and-drop (File System API, works offline) or paste a GitHub URL (REST API from the browser). Zero backend, zero config, zero API keys required.
Key Features
- Obsidian-style force graph with glowing nodes sized by file complexity, colored by type
- Full AST parsing for JS/TS/JSX/TSX via @babel/parser, regex-based parsing for Python and Java
- Hover to highlight connections, click for detail panel with imports/exports/functions/source
- Double-click any file to zoom into its internal function graph
- Spring physics — drag a node and the whole graph responds
- Semantic zoom: labels appear at close range, clusters at distance
- Cmd+K fuzzy search across files, functions, and exports
- File type filters: Components, Routes, Services, Utils, Tests, Config
- Minimap with click-to-navigate
- Optional AI annotations (user provides their own OpenAI key for per-function summaries)
- 100% client-side — code never leaves the browser
Architecture
- File Loader: Browser File System API for local folders, GitHub REST API for remote repos — no backend needed
- AST Parser: @babel/parser for JavaScript/TypeScript, regex for Python/Java — all in-browser
- Graph Builder: Constructs node/edge data from parsed imports with automatic cluster detection
- Renderer: D3.js force simulation on HTML5 Canvas with curved edges, opacity based on connection strength
- Deployment: Static site on Vercel — no cold starts, no sleeping backends, zero cost