Visual Subnet Calculator Fork

Subnetting in Visual Subnet Calculator follows a binary buddy-tree model:

• Split Operation: Divides any selected subnet block into two equal halves (incrementing the prefix length by 1 bit, halving the host capacity per sub-block).
  IPv4 Example: Splitting 10.0.0.0/16 creates two contiguous /17 subnets: 10.0.0.0/17 and 10.0.128.0/17 (each spanning 32,768 IP addresses).
  IPv6 Example: Splitting 2001:db8::/32 creates 2001:db8::/33 and 2001:db8:8000::/33.
  You can split repeatedly down to /32 in IPv4, or down to /128 in IPv6.
• Join Operation: Combines two adjacent buddy subnets that share a common binary ancestor back into their single parent block (decrementing the prefix length by 1 bit).
  The Join button activates dynamically only when both sibling subnets are adjacent, un-split, and reside at the exact same prefix depth.
• RFC 7421 SLAAC Boundary Protection: IPv6 subnets at /64 are designated as standard leaf subnets (marked with .split-disabled). Clicking triggers an educational modal explaining SLAAC interface identifier requirements.
• RFC 6164 Point-to-Point Support: Subnets at /127 can be split into two /128 host addresses for router inter-links, preventing neighbor discovery ping-pong attacks.

Visual Hierarchy & Note Persistence: Visual tree brackets on the right clearly illustrate split lineage. All custom notes, labels, and color assignments automatically remain bound to their respective subnets throughout splitting and joining.

You can switch between IPv4 and IPv6 at any moment using the dedicated segmented toolbar at the top of the interface:

IPv4 Engine (32-Bit):

Default root network is 10.0.0.0/16 with 17 rapid preset buttons (/16 through /32). It automatically computes Subnet Address, Address Range, Usable Host Range, Total Addresses, Usable Hosts, Subnet Mask, and Wildcard Mask. It includes full support for RFC 3021 /31 point-to-point links (2 usable hosts with 0 reserved network/broadcast addresses) and /32 single host routes.

IPv6 Engine (128-Bit):

Default root network is 2001:db8::/32 with 12 standard tier presets matching global Internet registry and enterprise architecture best practices:

Lossless 128-Bit Precision: IPv6 math is executed via native JavaScript BigInt bitwise calculations, avoiding floating-point rounding errors across huge address spaces. Output strictly adheres to RFC 5952 canonical format (leading zero suppression, lowercase hexadecimal, and :: compression).

Major public cloud providers reserve specific IP addresses within subnets for their internal management and routing infrastructure. Select your operating profile from the Tools dropdown menu:

When a cloud mode is activated, the Usable IPs and Hosts columns dynamically adjust to display accurate usable address boundaries, preventing costly IP provisioning errors in production.

10-Swatch Color Palette:

Visual Subnet Calculator provides 10 curated pastel colors to help you visually distinguish functional layers (e.g., DMZ, Web Tier, App Tier, Database, Kubernetes, Management, VPN, Storage, IoT, External):

1. Click Change Colors in the bottom navigation toolbar to open the color palette.
2. Click any of the 10 color swatches to choose it as your active paintbrush.
3. Click on any subnet row in the table to apply the active color.
4. Click Stop Changing Colors when finished to close the palette.

Inline Subnet Notes:

Every row includes an editable Note input field. Use it to record VLAN IDs, CIDR names, server cluster tags, or security zone notes. Notes are automatically preserved across splits and joins, and are serialized into shared URL links, JSON configurations, CSV spreadsheets, and Plain Text exports.

Share via Compressed URL Hash:

Click the share button in the bottom navigation toolbar to copy a direct shareable URL to your clipboard. The entire state—base network, prefix length, all splits and joins, color assignments, notes, and cloud operating mode—is compressed via LZ-String into a URL hash parameter (#?c=...). Anyone opening the link will instantly view your exact network design without requiring an account.

Multi-Format Import & Export (JSON, CSV, Plain Text):

In the Tools menu, select Import / Export. Visual Subnet Calculator supports 3 comprehensive data formats:

• JSON (.json): Complete hierarchical representation of your subnet tree, notes, colors, IP version, and cloud mode for backup, IaC (Terraform, CloudFormation), or Git tracking.
• CSV (.csv): Strict RFC 4180 compliant comma-separated values format with double-quoted fields (Subnet Address, Address Range, Usable IPs, Hosts, Note, Color), ready for Excel, Google Sheets, LibreOffice Calc, or IPAM tools.
• Plain Text (.txt): Dynamically aligned ASCII text tables with metadata comments for network design documentation, Git pull requests, runbooks, and change tickets.

Modal Workflow Actions:

• Format Switcher: Switch between JSON, CSV, and Plain Text with instantaneous live re-formatting.
• Load File (Upload): Upload local .json, .csv, or .txt files directly via the browser's HTML5 FileReader API.
• Download File: Save exported configurations to disk via in-memory Blob download triggers.
• Copy to Clipboard: Copy formatted text with visual "Copied!" confirmation.
• Automatic Tree Reconstruction: Importing flat CIDR lists calculates the minimal common supernet ($32 - \lfloor \log_2(\text{xor}) + 1 \rfloor$) and reconstructs the entire binary tree dynamically.

Yes, 100%. Visual Subnet Calculator operates entirely within your web browser's local JavaScript runtime:

• Zero Data Transmission: Your IP addresses, subnet schemes, labels, notes, and topologies are never sent over the network to any remote server (0 bytes network egress).
• Zero Analytics & Cookies: No Google Analytics, no tracking pixels, no telemetry beacons, and zero tracking cookies.
• Offline & Air-Gapped Operation: Once loaded, the tool functions completely offline without an active internet connection. It can be self-hosted locally or deployed in air-gapped enterprise data centers.
• Security Hardened: Context-aware HTML entity encoding (escapeHtml()) prevents stored Cross-Site Scripting (XSS), dynamic boundary modals bind data using safe text nodes (.text()), and all assets are verified with Subresource Integrity (SRI) hashes. Passed GitHub CodeQL with 0 alerts.

Visual Subnet Calculator is engineered with fluid CSS tokens and responsive container rules supporting a diverse spectrum of displays:

• Resolutions: Fluid layout scales from legacy VGA (640×480) displays up to 2K (2560×1440) and 4K UHD ultrawide monitors.
• Device Spectrum: Workstations, laptops (MacBook, Windows, Linux), tablets (iPad portrait and landscape, Samsung Galaxy Tab), and smartphones (iPhone, Samsung, Xiaomi, Google Pixel, Android).
• Responsive Toolbar Chips: Preset buttons wrap cleanly (flex-wrap: wrap) without breaking table alignment or clipping buttons.
• Mobile Accessibility: Smooth horizontal scrolling on tables with sticky headers, scoped IPv6 font scaling (0.74rem), and accessible touch targets conforming to WCAG 2.2 Level AA (minimum 44×44px interactive areas).

• Fast CIDR Input: You can type or paste a complete CIDR notation (e.g. 172.16.0.0/12 or 2001:db8:1::/48) directly into the Network Address field and press Enter or click Go. The tool automatically parses and separates the IP and prefix length into their respective fields.
• Instant Validation Tooltips: Real-time input validation flags invalid octets (outside 0–255), illegal characters, or out-of-range prefix lengths before calculation errors can occur.
• Two-Way Presets Sync: Clicking any preset button in the toolbar immediately recalculates the root network and synchronizes the network size input field, and vice versa.
• Dynamic Table Filtering: Use the search input in the bottom toolbar to filter visible subnets by prefix or note in large, complex CIDR trees.
• $O(1)$ Constant-Time Math: All calculations execute through a deterministic bitwise mask ((0xffffffff << (32 - netSize)) >>> 0), ensuring zero jitter or lag during rapid edits.

Visual Subnet Calculator is governed by formal architectural criteria defined under RFC 2119 / RFC 8174 to guarantee deterministic computation, zero data leakage, and production stability:

🔴 MUST (Mandatory Invariants):

• MUST Execute Purely Client-Side: All computations, tree splits, joins, and format conversions MUST occur in the local browser runtime. Zero topology data may ever be transmitted to external servers.
• MUST Use 128-Bit Lossless Math (BigInt): IPv6 calculations MUST utilize native BigInt arithmetic and MUST NOT be cast to standard JavaScript Number types.
• MUST Sanitize Dynamic HTML Inputs: All user notes, labels, and imported configurations MUST be HTML entity encoded (escapeHtml()) prior to DOM rendering.
• MUST Use Safe Text Sinks: Dynamic boundary alerts MUST bind data using safe text nodes (.text()), eliminating DOM XSS sinks.
• MUST Enforce RFC 4180 for CSV: CSV exports MUST escape internal quotes as "" and enclose all fields with double quotes.
• MUST Provide Accessible Form Labels: All interactive controls (including #importFileInput) MUST have semantic <label> elements and descriptive titles meeting WCAG 2.2 AA.
• MUST Run as Unprivileged User: Docker production containers MUST execute under numeric non-root context (USER 101).

🟡 SHOULD (Strong Recommendations):

• SHOULD Use LZ-String Compression: Share state via compact URL query hashes (#?c=...) for serverless peer collaboration.
• SHOULD Enforce Production HTTPS with HSTS: Deploy with TLSv1.2/v1.3 and HSTS headers (max-age=31536000).
• SHOULD Configure Healthchecks: Docker containers SHOULD declare active HTTP healthcheck probes.
• SHOULD Apply Color-Coded Tiering: Segment multi-tier infrastructure visually for rapid auditing.

🟢 MAY (Permissible Options):

• MAY Export to Plain Text: Download or copy formatted ASCII tables for Git pull requests and RFC runbooks.
• MAY Use Python 3 or Caddy: Run lightweight local servers for air-gapped testing.
• MAY Allocate /127 Subnets: Split IPv6 down to /127 for router point-to-point inter-links (RFC 6164).

⛔ AVOID (Strict Anti-Patterns):

AVOID inline HTML style="..." attributes, AVOID floating-point math for IPv6, AVOID unsanitized innerHTML sinks, AVOID splitting past /64 SLAAC without RFC 7421 justification, and AVOID unscoped global CSS selector pollution.

Visual Subnet Calculator functions as the foundational IP planning and allocation engine for broader production networking systems:

• Netplan Interface Automation: Calculated subnets, gateways, and netmasks directly inform automated Netplan YAML configuration profiles for Ubuntu and Debian production hosts.
• Network Routing & Diagnostics: Correlate subnet boundaries with live diagnostics using Ping, Traceroute, and MTR to quickly pinpoint gateway hops and routing anomalies.
• DNS Zone Administration: Export exact CIDR boundaries to populate forward (A/AAAA) and reverse (in-addr.arpa and ip6.arpa) PTR zone delegation records.
• Security Audits & Discovery: Define precise target IP ranges for Nmap port scans, IPERF3 throughput benchmarking, and WHOIS compliance verification.
• Zero-Trust Access Control (ACLs): Establish granular subnet-level IP access control rules across Nginx reverse proxies, HAProxy, and cloud security group policies.

Visual Subnet Calculator is actively maintained, enhanced, and engineered by HARRY DERTIN SUTISNA (@alsyundawy) under ALSYUNDAWY IT SOLUTION. The project builds upon foundational open-source work by Caesar Kabalan, bl4ckfir3, and David C.

Maintainer Channels & Links:

• Official Website: https://alsyundawy.com (ALSYUNDAWY IT SOLUTION)
• GitHub Profile: https://github.com/alsyundawy
• X (formerly Twitter): https://x.com/alsyundawy (@alsyundawy)
• Telegram: https://t.me/alsyundawy (@alsyundawy)
• Repository: https://github.com/alsyundawy/visualsubnetcalc
• Bug Reports & Feature Requests: GitHub Issues
• Email: alsyundawy@gmail.com
• Support & Donations: Donate via PayPal

Visual Subnet Calculator is licensed under the open-source MIT License. Community contributions, pull requests, and feedback are always welcome!