Binary Bit Visualizer

Flip a bit — watch unsigned, signed (two's complement), hex, and octal update at once.

Row A Column weights above; the top one is negative in two's complement

Five readings of row A

Binary 二進位
0000 0000
Unsigned 無號
0
Signed (two's complement) 有號
0
Hex 十六進位
00
Octal 八進位
0

All computed in-browser. No data sent. See also Number Base Converter (base conversion without bit operations).

About Binary Bit Visualizer

Bits have no intrinsic value — the interpretation does. The same pattern 1111 1111 reads as 255 in unsigned and −1 in two's complement (signed). Not a single bit changed; only the reading rule did. This tool makes the bit row the single source of truth: click a bit to flip it, and all four readouts update in the same visual beat.

The "Negate" operation demonstrates the two's complement rule −x = ~x + 1: first invert all bits, then add 1 from the LSB, rippling carry leftward until it hits a 0. The tool plays this in two distinct beats: all bits invert at once, then a cyan carry spark travels the row bit by bit. If the carry flips the sign bit (MSB) unexpectedly — causing signed overflow — that cell is framed and highlighted.

All 32-bit readouts use BigInt, bypassing JavaScript's 32-bit signed-integer trap (e.g. 1 << 31 becoming negative). Logical right shift (>>>) in 8/16-bit modes is computed via an unsigned mask. Glossary: two's complement, sign bit, MSB, arithmetic right shift (>>), logical right shift (>>>), sign extension, overflow, carry ripple.

Quick guide

Use cases, answers, and nearby tools

Compact below-tool notes that help first-run users and repeated visitors move faster without changing the main interface.

Chinese search: 二補數 計算、位元 視覺化、int8 溢位、算術右移 邏輯右移 差別、符號位元 溢位、補數 取負 演示

How to use

Run a clean first pass

  1. Click any bit switch to flip it — 1 glows raised, 0 sinks recessed. Drag to flip a run of bits at once.
  2. Switch bit-width with the 8 / 16 / 32 buttons; hit Negate or +1 to watch the carry-ripple animation and overflow flag.
  3. Shift mode shows arithmetic (>>) vs. logical (>>>) right-shift side by side; Bitwise mode aligns AND / OR / XOR / NOT column by column.

Examples

Real jobs this page helps with

  • All-ones dual reading (8-bit)Set all 8 switches to 1 (11111111). The decomposition line spells it out: −128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 = −1. The top bit carries a NEGATIVE weight — that is why one row of bits reads as both 255 and −1.
  • Overflow caught red-handed: 127 + 1Load 01111111, hit +1. The carry ripple slams the sign bit; signed jumps 127 → −128 and the MSB is framed as the culprit.
  • Negate, played out: negate 8Load 8 (00001000) and press Negate. Beat one inverts the row to 11110111; beat two sends a cyan carry spark left across three cells, stopping at bit 3 to land on 11111000 = −8. That is −x = ~x + 1 as a visible action. (8 rather than 5: negating 5 stops the carry after one cell, so the spark has nowhere to travel.)
  • Shift split: −16 right-shifted by 1Load 11110000, enter Shift mode, right-shift by 1. Arithmetic (>>) gives 11111000 (−8); logical (>>>) gives 01111000 (120) — shown in parallel rows.

FAQ

What people usually want to know

Why does 1111 1111 equal both 255 and −1?

Bits have no inherent value — the reading rule does. Unsigned treats all eight 1s as pure binary = 255. Two's complement (signed) treats the MSB as a sign bit, making 1111 1111 equal −1. Not a single bit changed; only the interpretation did.

Why is negation ~x + 1 instead of just flipping the sign?

Two's complement defines negation as bitwise NOT then add 1. Take 5 (0000 0101): invert to get 1111 1010, add 1 to get 1111 1011, which is −5. The tool plays both beats — invert, then carry ripple — so −x = ~x + 1 becomes a visible action.

Why does 127 + 1 become −128 in an int8?

Adding 1 to 0111 1111 carries all the way into the sign bit, producing 1000 0000. Unsigned reads 128, but signed sees a 1 in the MSB and reads −128. The tool frames the flipped bit as the overflow culprit.

What's the difference between >> (arithmetic) and >>> (logical)?

Identical for positive numbers; they diverge for negatives. Arithmetic shift fills the vacated high bits with the sign bit (preserving the sign); logical shift fills with 0s. Right-shifting 1111 0000 by 1: arithmetic → 1111 1000 (−8), logical → 0111 1000 (120). The tool shows both rows in parallel.

How is this different from Number Base Converter?

Number Base Converter is about conversion — give it a value, get it in different bases. Binary Bit Visualizer is about interpretation and operations — bits are the input, and you flip them, negate them, shift them, and run bitwise ops on them, watching all four readings update in the same instant.