Bit manipulation visualizer

This bit manipulation visualizer lets you evaluate bitwise expressions step by step and see the binary result of every operation. Define variables, toggle individual bits, and use operators like AND, OR, XOR, shifts, and rotates to explore how bitwise logic works at the bit level.

• Define variables in the variable bank (up to 6). Click any bit cell to toggle it, or type a value directly.
• Enter expressions like (A >> 4) & 0xF and press Enter to evaluate. Numbers work on their own too: 255 + 1 or 0xFF & 0x0F.
• Number literals work in decimal (255), hex (0xFF), binary (0b11111111), and octal (0o377).
• Equality: == and != compare two expressions and return 1 (true) or 0 (false), e.g. A & 1 == 0.
• Functions: rol(val, n) and ror(val, n) for bitwise rotate left/right. popcount(val) counts set bits, clz(val) counts leading zeros, ctz(val) counts trailing zeros.
• Shift operators use JS semantics: >> is arithmetic right shift (sign-extending), >>> is logical right shift (zero-filling). This matters for negative values.
• Operator precedence (low to high): == !=, then |, ^, &, shifts << >> >>>, + -, * / %, unary ~ -, then functions. Use parentheses to override.
• Chain mode: toggle it on to pipe results between expressions. Use $ to reference the previous step's result, e.g. A >> 4 then $ & 0xF.
• Arrow keys Up/Down in the expression input to cycle through history. Press Escape to clear.
• Changing bit width resets all variable values to 0 and clears the chain.
• A red Dec value means signed overflow: the true result, reading the operands as signed, does not fit in the bit width. A red Unsigned value means unsigned overflow: reading the operands as unsigned, the true result does not fit (a carry or borrow out).
• The Bit tricks section at the bottom follows the last focused variable.