Invisible Characters Viewer
Visualize spaces, tabs, and line breaks by rendering invisible characters in code view.
Readme
What are invisible characters?
Invisible characters are Unicode code points that have no visible glyph but still occupy space in a string and influence how software processes or renders text. They include control characters (like tab and line feed), format characters (like zero-width joiners and directional marks), various whitespace variants, and special markers like the Byte Order Mark (BOM). Because they look like nothing, they are notoriously hard to spot in a plain text editor and are a common source of subtle bugs, broken layouts, and data-processing errors.
Tool description
The Invisible Characters Viewer is an interactive text editor that renders every invisible character as a visible symbol, right in place. Paste or type any text and each hidden character is immediately replaced by a small symbolic glyph — tabs appear as →, spaces as ·, zero-width spaces as ·, directional marks as → / ←, BOM as ▯, and so on. Hovering over any glyph shows a tooltip with the character's full name and Unicode code point. Nothing leaves the editor; all rendering happens locally in your browser.
Examples
| Input text (raw) | What you see in the viewer |
|---|---|
Hello\u200BWorld (zero-width space between words) |
Hello·World with the · glyph marking U+200B |
\u202Eright-to-left override |
→right-to-left override with the directional glyph at the start |
line one\r\nline two |
Carriage-return and line-feed glyphs before the newline |
\uFEFFstart of file |
▯start of file showing the BOM at position 0 |
Features
- Inline rendering: Invisible characters are shown as glyphs directly inside the editor rather than in a separate panel, so you see them in context with the surrounding text
- Broad character coverage: Handles C0 and C1 control characters, all named Unicode format characters, Unicode whitespace variants (en space, em space, hair space, narrow no-break space, etc.), directional formatting characters, variation selectors, tag characters, and BOM
- Tooltips: Hovering over any glyph displays the character's full Unicode name and code point (e.g.,
Zero Width Space — U+200B)
How it works
The tool uses CodeMirror 6 with a custom extension that iterates over every character in the editor's visible viewport. For each code point it checks a lookup table of known invisible characters, tests against Unicode property classes \p{Cc} (control) and \p{Cf} (format), and detects variation selectors and tag character ranges. Matched characters are replaced by inline decoration widgets showing the corresponding symbol glyph. Regular spaces and tabs are delegated to CodeMirror's built-in highlightWhitespace extension.