subnet-visualizer

A single-file browser tool for interactively carving a network into subnets and visualizing its IP allocation.

Features

• Interactive subnet map: recursively Divide a row to split it in half, or Join to merge halves back. The nested join column mirrors the tree structure.
• Editable labels: name a subnet (e.g. web-tier). Labeled subnets count as allocated, unlabeled ones as free space.
• Live heatmap: a proportional view of allocated versus free space that updates as you divide, join, and label.
• Stats: total IPs, subnet count, allocated IPs, free IPs.
• Subnet table: netmask, address range, useable host range, and host count per subnet.
• Two-way subnet list: a copy/paste box that mirrors the current layout as text and rebuilds it from a pasted list (see below).
• CIDR quick reference: a collapsible /8 to /32 cheat sheet.
• Light and dark themes: toggle in the footer, remembered across visits and defaulting to your OS preference.
• Shareable links: the whole layout lives in the URL (see below).

Usage

1. Enter a network in CIDR notation (e.g. 10.0.0.0/16) and click Visualize.
2. Divide a row to split it; click a Join cell to merge back.
3. Label a subnet to mark it allocated. It gets a color in the heatmap.

Load Example fills a sample 10.10.0.0/16 layout, and Reset clears everything. Actions that would discard labels ask for confirmation first.

Subnet list (copy / paste)

The Subnet list panel is a live text view of the layout, one leaf per line: CIDR name for an allocated subnet and a bare CIDR for free space. It updates as you divide, join, and label.

Paste your own list and click Build from list to rebuild the layout. Add a name to mark a subnet allocated, leave it bare for free space, and any address ranges you omit fill in as free automatically.

10.10.0.0/24 mgmt
10.10.2.0/23 web-tier
10.10.16.0/20

Shareable links

The URL holds the entire state. It stays compact by storing the essentials: the network, the ordered leaf prefixes (the tree shape, from which addresses are recomputed on load), and any labels.

?network=10.10.0.0/16&s=24,24,23,22,21,20,19,18,17&l=0~mgmt,1~dmz,2~web-tier,5~app-tier

A bare network is just ?network=10.0.0.0/16. Copy link copies the current view, and older ?tree=... links still resolve.

Credits

Interactive divide/join map inspired by David C's Visual Subnet Calculator. Built with the help of Claude AI and released under GPL-3.0.