BookmarkedTools LogoBookmarkedTools
Official DocumentationDeveloper Tools6 min read• Updated August 2026

Space Analyser Documentation — Complete Guide & Architecture

A technical deep dive into client-side disk space analysis, squarified treemap algorithms, File System Access API streaming, and simulated pruning.

# Overview

Space Analyser is a 100% private, client-side disk space diagnostic and storage visualization tool. It empowers users to explore local directory sizes, analyze disk usage using squarified treemaps, inspect collapsible folder trees, analyze file extension distribution, and simulate space pruning without uploading files to any external server.

100% Client-Side Architecture: All operations execute inside your browser's V8 engine and Canvas sandbox. Zero files, color swatches, or code payloads are sent to external servers.

# Under The Hood & Browser APIs

Space Analyser leverages modern Web APIs and algorithms to deliver high-performance disk analysis locally:

Chromium File System Access API

Uses `window.showDirectoryPicker()` and asynchronous iterative handle traversal to scan directory structures directly on your local filesystem without uploading bytes.

Squarified Treemap Layout (Bruls-Huizing-van Wijk)

Calculates optimized 2D aspect ratios for hierarchical rectangles so that large files and heavy folders are immediately visible and navigable.

Aggregated Metrics Engine

Recursively aggregates byte sizes, file counts, and depth levels in-memory with throttled UI progress reporting for smooth 60 FPS feedback.

Simulated Pruning State Machine

Allows non-destructive removal of folders in the UI state to instantly preview reclaimable storage before making changes on disk.

# 1. Scanning Local Directories

1. **Choose Folder**: Click the "Select Local Folder" button to prompt the browser directory picker. 2. **Grant Read Access**: Grant permission to let the browser read directory metadata. 3. **Live Scan Progress**: Observe real-time scanning metrics, item counts, and current folder path updates. 4. **Explore Demo**: If your browser lacks the File System Access API, click "Explore Demo" to inspect a realistic pre-loaded file structure.

# 2. Treemap & Tree Navigation

- **Click to Drill Down**: Clicking any folder block zooms into that directory level. - **Breadcrumbs**: Use the top breadcrumb bar to quickly jump back to parent folders. - **Simulated Pruning**: Click the trash icon next to any directory in the table to see how much total storage would be reclaimed.

# Technical Specifications & Limits

Parameter / PropertySpecification / Value
Directory APIChromium File System Access API (showDirectoryPicker)
Layout EngineSquarified Treemap (Bruls-Huizing-van Wijk algorithm)
Privacy Architecture100% Zero-Server Telemetry & Client-Side Execution
Data PersistenceVolatile in-memory state with demo dataset fallback

# Keyboard Shortcuts & Pro Controls

Focus search and filter barCtrl + F / Cmd + F
Reset drill-down or exit modalEsc
Navigate up one folder levelAlt + Left

# Frequently Asked Questions

Are my files or names sent to external servers?

Why is the File System Access API not working in Firefox / Safari?

Try Space Analyser — Interactive Disk Storage Visualizer & Tree Analyzer Now

Test features in your browser with zero installations, zero server uploads, and 100% free offline capabilities.

Open Interactive Tool