Storage Planner (by Firsh)

A visual drag-and-drop tool for planning storage allocation across multiple drives, servers, and NAS devices.

About

Storage Planner helps you visualize and organize data distribution across different storage locations. Whether you're planning a server migration, organizing a homelab, or managing data across multiple drives, Storage Planner provides an interface to see exactly how and where your data fits.

Ideal for:

• Anyone juggling data across local drives, remote servers, and NAS devices
• Planning storage migrations
• Homelab enthusiasts organizing data across multiple drives
• Data hoarders managing large media collections
• Planning backup sets

This document covers all features, read through the sections below.

• Feedback: Chat with me on bsky: @firsh.dev
• Are you Hungarian? Az eszköz elérhető magyarul is.

Enjoying Storage Planner? If you find this tool useful, buy me a tea 🍵 via Stripe or support directly using crypto. Completely optional, but appreciated!

• BTC bc1qwm8q89vl3hxzfugztf7p744hnuky7f7vk2s0vt
• LTC ltc1qehgstdq043fhy7th4gf8rs76gprd6vw54y3dqa
• DOGE DLPbYnt5afGzK9GQEYkKVt8qGpq5ESCu3M

Key Features

Storage Management

Multiple Storage Types

• Local Drives: Physical drives connected to your computer
• Remote Servers: Cloud storage or remote machines
• NAS Devices: Network-attached storage
• Unallocated Data: Holding area for data not yet assigned to a storage location

Flexible Sizing

• Enter sizes in GB or TB
• Specify "claimed" (advertised) vs "actual usable" capacity
• Automatically handles manufacturer vs. usable storage calculations

Visual Organization

• Influence the order of storage boxes using arrows on the floating bar
• Category-based color coding (blue for local, green for remote, purple for NAS)
• Filter visibility by storage type

Data Items

Size Tracking with Min/Max Scenarios

• Min Size: Minimum expected size (e.g., after compression or deleting)
• Current Size: Actual size right now
• Max Size: Maximum expected size (e.g., if data grows or is uncompressed)
• Toggle between views to see different scenarios
• Smart Syncing: Min and Max automatically sync with Current when left at default (indicated by a chain link icon). Manually setting them to equal Current re-establishes the sync link.

Drag-and-Drop Organization

• Drag data items between storage boxes
• Automatic capacity usage calculations

Backup Management

• Create linked backup copies with one click
• Backups stay synced with the original (name and size)
• Original has colorized dot indicators where it has a copy
• Double click for visual highlighting to easily see all copies of a data item

Progress Tracking

• Mark items as "done" with a checkbox (e.g. you have finished copying it) as a visual strikethrough for completed items

Capacity Planning

Real-Time Capacity Warnings

• Original color: Less than 90% full (safe)
• Yellow color: 90-100% full (getting tight)
• Red color: Over 100% full (won't fit!)

Visual Space Allocation

• Horizontal bar chart shows space usage at a glance, with clickable segments to highlight corresponding item(s)
• Each data item sized proportionally to its actual size
• Color-shaded for easy identification

Transfer Time Estimates

• Set your reasonable transfer speed
• See estimated transfer time for each data item
• Helps plan migration timing

Tally Summary

• See total data size vs available capacity
• Toggle between unique data (ignoring backups) and total data (counting everything)
• Respects storage category filters

Layouts

Vertical Masonry Layout (Compact)

• Boxes automatically fit into available space
• Minimizes empty space
• Great for seeing everything at once

Grid Layout (Relaxed)

• Uniform rows for predictable positioning and order
• Optional 2-row spanning for large boxes
• Better for focused work

Responsive Column Control

• Adjustable number columns with automatic ranges based on screen size
• Click the columns adjustment control to toggle automatic recommendation

Persistence & Sharing

Automatic Saving

• All changes saved instantly to your browser's localStorage
• Data persists across sessions
• No server, no account, no cloud

Import/Export

• Export your entire configuration as JSON
• Share planning files with others

Example Data

• Load pre-configured example to see most features by holding the lightbulb icon
• Great starting point for exploring the app, but wipe it any time

Reset

• Hold the reset button for 1.5 seconds to clear everything
• Same button loads example data when starting fresh

Appearance

Dark/Light Mode

• Toggle anytime with the theme button

Getting Started

Your First Storage Plan

1. Add Storage

• Click "Add Storage" in the top right
• Enter a name (e.g., "Main SSD")
• Enter size and unit (e.g., "2" TB)
• Choose "claimed size" for advertised capacity or uncheck for usable capacity
• Select category: Local, Remote, or NAS, this will determine its color

2. Add Data Items

• Click the "+" button inside a storage box (or in the Unallocated space)
• Name your data (e.g., "Photos Library", "Work documents", "Music library")
• Enter three sizes:
• Min: Smallest it could be (compressed) - optional, defaults to Current
• Current: What it is right now (required)
• Max: Largest it might grow to - optional, defaults to Current
• All sizes are in GB
• Tip: Min and Max will auto-sync with Current if left at default or manually set equal (look for the chain link icon)

3. Organize Your Data

• Drag data items between storage boxes to plan your setup
• Watch capacity indicators change in real-time
• Use the min/current/max toggle to see different scenarios

4. Plan for Redundancy

• Click the copy icon on a data item to create a backup
• Drag the backup to a different storage
• Edit the original and backups stay synced
• Double click any item to highlight all its copies, or click a segment in the visualizer

Tips & Tricks

Transfer Speed Planning

• Set transfer speed to estimate how long migrations will take

Category Filters

• Click category buttons (Local/Remote/NAS/Unallocated) to hide/show storage types
• Helps focus on specific parts of your setup
• Tally summary respects filters

Tally Toggle

• Click the tally summary to switch between:
• Unique: Counts each original item once (ignores backups)
• Used: Counts every item including all backup copies
• Useful for understanding actual vs redundant storage needs

View Modes

• Min: See best-case scenario (everything compressed/minimal)
• Current: See actual state right now
• Max: See worst-case scenario (everything at maximum size)
• Great for capacity planning: "Will it still fit if everything grows to max?"

Unallocated

• Special storage with unlimited capacity
• Always first (unless filtered out)
• Use it as a staging area for unassigned data
• Helps you see what still needs a home

Data Privacy

100% Client-Side

• No data is sent to any server
• No tracking, analytics, or telemetry
• No accounts or sign-ins required
• Free to use

Your Data Stays Local

• Everything stored in your browser's localStorage
• Data persists until you clear browser data
• Export JSON files for backup

Technical Details

Built With

• React 19
• TypeScript
• Tailwind CSS v4
• Vite
• @hello-pangea/dnd (drag-and-drop)

Browser Compatibility

• Modern browsers
• Requires JavaScript and localStorage
• Best experienced on desktop with a mouse for drag-and-drop interactions

FAQ

Q: Can I use this on mobile/tablet?

A: Storage Planner works on mobile devices with responsive layouts and touch support, but the experience is optimized for desktop use with a mouse. Larger screens provide better visibility for complex storage planning scenarios.

Q: Can I collaborate with others?

A: Not in real-time, but you can export your plan as JSON and share the file with others. They can import it to see and modify your layout.

Q: What happens if I clear my browser data?

A: Your storage plan will be deleted. Export the JSON to back up your work.

Q: Can I import real filesystem data?

A: Not currently, as the tool doesn't interact with your system in any way. You'll need to manually enter data item sizes. Consider using du -sh (Linux/Mac) or folder properties (Windows) to get sizes, then entering them manually.

Q: Why "claimed" vs "actual usable" size?

A: Drive manufacturers advertise capacity in decimal (1 TB = 1000 GB), but operating systems use binary (1 TiB = 1024 GiB). A "2 TB" drive might only show as ~1.82 TB usable. Storage Planner helps you plan with real-world capacities.

Q: Can backups have different sizes than originals?

A: No, backups are always synced to match the original's sizes. This is intentional - backups are commonly identical copies or mirrors. If you need different sizes or overhead for versioning, create additional data items.

Q: How do I delete a backup without deleting the original?

A: Click the delete button on the backup specifically. Deleting an original will delete all its backups, but deleting a backup only deletes that copy.

Q: Can I change the color scheme of the categories?

A: Category colors are fixed (blue/green/purple for local/remote/NAS).

Q: What's the difference between masonry and grid layout?

A: Masonry auto-fits boxes to minimize empty space (compact). Grid uses uniform rows with optional 2-row spanning (relaxed). Try both and see what you prefer! Once you have lots of data items and varying amount of them across storage boxes, the difference becomes more meaningful.