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. You can also use numbers directly without variables — 255 + 1 or 0xFF & 0x0F work on their own.
• 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): == != → | → ^ → & → << >> >>> → + - → * / % → ~ -(unary) → 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 sign flipped from the true mathematical result). A red Unsigned value means the true result exceeded the bit width's unsigned range.
• The Bit Tricks section at the bottom auto-updates for the last focused variable.