How is this different from the Binary / Text Converter?

The Binary / Text Converter turns text into a copyable binary, hex, octal or decimal string and back. This tool is for looking inside the bytes: each bit is drawn separately, can be flipped with a click, and two bytes can be combined with bitwise operators.

What happens when I click a bit?

The bit is inverted in that byte and the text box is rewritten with the character that has the new byte value, so the whole grid re-renders from the changed text. Flipping a bit of a multi-byte UTF-8 character is a raw byte edit and can produce a character the text box shows differently.

What does the bit calculator do?

Enter byte A and, for AND, OR and XOR, byte B — as eight binary digits, 0x-prefixed hex, or a decimal 0–255. Pick an operation button and the result is shown immediately in binary, decimal and hex, together with the printable character it maps to.

Does it support Unicode / UTF-8?

Yes. With UTF-8 selected the input is encoded with the browser's TextEncoder, so a multi-byte character produces two, three or four byte cards. The ASCII option instead keeps only the low seven bits of each character's code. The grid shows the first 64 bytes.

Developer Free No signup

Bit Pattern Visualizer

See each byte of your text as an 8-bit grid, flip individual bits, decode byte lists back to text, and run AND, OR, XOR, NOT and shift operations on two bytes.

Published Jun 9, 2026 By BoxTool

Loading tool…

About this tool

A byte-level view of text for learning how characters are stored. In Text → Bits mode every byte of the input (UTF-8, or ASCII with the top bit stripped) is drawn as a card: the character on top, its eight bits below, each bit position in its own color, with the hex, octal and decimal value switchable on and off. Clicking a bit flips it and writes the changed byte back into the text box. Bits → Text mode decodes a list of bytes written in binary, hex, octal or decimal back into text. The Bit Calculator takes byte A and byte B as binary, 0x-prefixed hex or decimal and shows the result of AND, OR, XOR, NOT A, A << 1 or A >> 1 in binary, decimal, hex and as a character. For plain text-to-binary conversion with copyable output, use the Binary / Text Converter instead.

How to use

1 Type or paste text into the box in Text → Bits mode.
2 Each byte appears as a card with its character, eight colored bits, and hex and octal values; tick Decimal to add the decimal value.
3 Click any bit to flip it and see the text change.
4 Switch to Bits → Text, choose the base, and paste space-separated byte values to decode them.
5 Switch to Bit Calculator, enter byte A and byte B, and pick AND, OR, XOR, NOT A, A << 1 or A >> 1.

How text becomes ones and zeros

A computer stores no letters — only numbers. Text becomes binary in two steps. First, a character encoding assigns each character a number: in ASCII the capital H is 72, lowercase i is 105. Second, that number is written in base 2, padded to a fixed width — usually 8 bits, one byte. So H (72) becomes 01001000 and i (105) becomes 01101001. This visualizer lays each character out as a labeled byte, color-codes the eight bit positions, and lets you flip any single bit with a click to watch the character change in real time.

ASCII vs. UTF-8 — why the choice matters

The encoding dropdown is not cosmetic. ASCII covers only the first 128 characters (English letters, digits, basic punctuation) and forces every character into a single 7-bit value. UTF-8 is the modern web standard and handles every character on Earth. Plain English is identical in both, but anything beyond ASCII diverges sharply. The tool encodes UTF-8 with the browser's real TextEncoder, so the bytes you see are exactly what a file or network packet would contain.

Concretely, the character é is one byte in some legacy encodings but two bytes in UTF-8 (11000011 10101001), and an emoji like a smiley is four bytes. That is why a tweet's character count and its byte count differ, and why "this string is 10 characters" does not mean "10 bytes." Switching the dropdown to ASCII for a non-English character will mangle it, because the value no longer fits in 7 bits — a useful demonstration of exactly why UTF-8 exists.

A worked example: encoding "Hi"

Char	Decimal	Binary (8-bit)	Hex	Octal
H	72	`01001000`	`0x48`	`110`
i	105	`01101001`	`0x69`	`151`

The tool shows all of these per character, and you can toggle the hex, octal, and decimal rows on or off. Reverse the process in Bits → Text: paste space-separated bytes in binary, hex, octal, or decimal and it decodes them back to text through the browser's TextDecoder, correctly reassembling multi-byte UTF-8 sequences.

The bit calculator and why bitwise operations matter

The third mode is a one-byte bitwise calculator. Enter two bytes (as binary, hex like 0x48, or decimal) and apply AND, OR, XOR, NOT, or a one-position shift, then read the result in binary, decimal, hex, and as a character. These operations are the bedrock of low-level programming:

AND keeps a bit only if it is 1 in both operands — used to mask out bits, e.g. value & 0x0F keeps the low nibble.
OR sets a bit if it is 1 in either operand — used to turn flags on.
XOR flips bits that differ; XORing a value with itself gives zero, which underlies simple toggles and checksums.
Left shift by one multiplies by 2 (within the byte); right shift divides by 2 and drops the remainder. Results are masked to 8 bits, so shifting can roll a bit off the end.

For example, 72 AND 48 is 01001000 AND 00110000 = 00000000 — no bit is set in both, so the answer is 0. Change the operation to XOR and you get 01111000 (120), the character x.

Common mistakes

Forgetting leading zeros. A byte is always 8 bits. 1001000 (7 bits) is not a valid byte; pad it to 01001000.
Mixing up bit order. The leftmost bit is the most significant (worth 128), the rightmost the least (worth 1). Reading them backwards gives a completely different number.
Assuming one character equals one byte. True only for ASCII-range text; accented letters, CJK characters, and emoji span multiple bytes in UTF-8.
Decoding partial UTF-8. If you paste only some of the bytes of a multi-byte character into Bits → Text, the result will be a replacement symbol because the sequence is incomplete.

Privacy

All encoding, decoding, and bit math happen locally in your browser via the standard TextEncoder and TextDecoder APIs. Whatever text you paste — including anything private — never leaves your device.