Interactive Bit Visualizer

Bit manipulation goes wrong in ways that are invisible in a debugger print. The Bit Visualizer lays a number out as a full-width grid of individually clickable bits, sized to fill the available screen rather than crouching in a narrow strip, so you can flip one and watch the decimal value, the popcount and the hex representation all move together.

Four cards report the GCC builtins competitive programmers actually reach for: __builtin_popcountll for set bits, __builtin_clz() for leading zeros, __builtin_ctz() for trailing zeros, and the position of the highest set bit. Seeing them recomputed as you toggle a bit is considerably faster than recompiling to find out.

Both a 32-bit and a 64-bit view are available. The 64-bit path works on a boolean array and decimal strings rather than on BigInt, which keeps the build target broad. That same decimal-string arithmetic drives each bit's place value and running total, so those two numbers stay exact across all 64 bits even past the point where the Decimal Value field itself starts to round.

Getting a Number Onto the Bit Grid

1. Choose 32 or 64 for the width. The grid redraws with that many cells, each labelled with its index so bit 0 is unmistakably the least significant. At 64 bits the grid splits into two rows of 32, the top row holding bits 63 through 32.
2. Type into Decimal Input. The default is 42, which is 101010 in binary and gives a popcount of 3. Anything unparseable answers Enter a valid integer.
3. Click any cell to flip that bit. The decimal value updates from the grid, which makes the grid the source of truth rather than the text field.
4. Hover a cell, or tab to it with the keyboard, and the Bit Contribution HUD beneath the grid loads four readouts for it: position, place value, On/Off status, and a running sum that totals every set bit from bit 0 up through the one you're on. The HUD holds that bit's data until you point at another one, so moving the mouse away to read it does not blank the panel.
5. On the default 42, hovering bit 5 (the highest of the three set bits) shows Sum before this bit (10) + this bit's value (32) = 42 — the running sum reaches the full decimal value exactly when you reach the highest set bit, not before.
6. Watch the builtin cards while you do it. Flipping the highest set bit changes both the leading-zero count and the MSB position, and that pairing is the thing worth internalising.
7. Read the Binary and Hexadecimal rows underneath. Binary prints most significant bit first, the same left-to-right order as the grid above, and Hexadecimal groups those same bits four at a time.

What Happens When the Sign Bit Flips

• In 32-bit mode the value is assembled as unsigned and then reinterpreted as signed, so setting bit 31 turns the reading negative. All 32 bits set displays as -1, not 4294967295.
• Negative input is stored in two's complement, which is why -1 lights every cell and -2 lights all but bit 0.
• In 64-bit mode the decimal is carried as a JavaScript number, so values beyond 9,007,199,254,740,991 cannot be represented exactly and the display saturates rather than wrapping. Bit 62 is the last one that survives a round trip intact.
• With every bit clear, the leading-zero count reads the full width, 32 or 64, and the MSB position shows — instead of a number. That mirrors the real builtins, which are undefined on an argument of zero.
• The trailing-zero count behaves the same way on zero, returning the width rather than an error, so do not read either count as meaningful until at least 1 bit is set.