CIDR / Subnet Calculator — Free HTML CSS JS Snippet

CIDR (Classless Inter-Domain Routing) notation packs an IPv4 address and a network prefix length into one compact string, like 192.168.1.10/24. Reading the actual network boundaries out of that string by hand means converting each octet to binary and applying a mask — this snippet does that arithmetic for real, with genuine bitwise operations on 32-bit integers, not a lookup table of common prefixes.

Packing an IPv4 address into a single 32-bit integer

ipToInt() takes the four octet numbers and combines them with bit shifts: (parts[0] << 24) | (parts[1] << 16) | (parts[2] << 8) | parts[3], then coerces the result to an unsigned 32-bit integer with >>> 0 (a zero-fill right shift by zero, a common JavaScript idiom for forcing a value into unsigned 32-bit range). This matters because JavaScript's bitwise operators work on signed 32-bit integers internally — without the >>> 0 coercion, an address with a high first octet like 192.x.x.x would compute to a negative number and every downstream calculation would be wrong. intToIp() reverses the packing, extracting each octet with a right-shift and an & 255 mask.

Deriving the subnet mask from the prefix length

The subnet mask for a given prefix /n is n set bits followed by 32-n zero bits. The calculator builds it with (0xFFFFFFFF << (32 - prefix)) >>> 0 — starting from all 32 bits set, then shifting left by the host-bit count zeroes out exactly that many low bits. A prefix of /0 is special-cased to a mask of 0, since shifting a 32-bit value left by 32 is undefined behavior in JavaScript (shift amounts wrap modulo 32, so << 32 is actually << 0, which would incorrectly leave all bits set).

Network and broadcast addresses via AND and OR with the wildcard mask

The network address is ipInt & maskInt — ANDing zeroes out every host bit, leaving only the network portion. The broadcast address is the network address ORed with the wildcard mask (~maskInt >>> 0, the bitwise complement of the subnet mask), which sets every host bit to 1. This is exactly the arithmetic a router or a language like Python's ipaddress module performs internally; the calculator just makes each step and its rationale visible.

Usable host count and the /31, /32 special cases

Total addresses in a subnet is 2^(32-prefix). Usable hosts is normally that total minus 2, because the network and broadcast addresses at the two ends of the range can't be assigned to a host. Two edge cases are called out explicitly rather than silently applying the generic formula: a /32 is a single-host route with no network/broadcast distinction at all, and a /31 (per RFC 3021) is a point-to-point link where *both* addresses in the two-address block are usable, since there's no room to spare a broadcast address on a link with only two possible endpoints.

The binary bit visualization

renderBinary() converts each octet to an 8-character binary string and colors the first prefix bits (the network portion, shared by every host in the subnet) differently from the remaining host bits, letting you see directly which bits the mask fixes and which bits are free to vary across every address in the range — the same visual most networking textbooks draw by hand.