Overview
Introduction
Whitespace bugs, like a trailing space at the end of a line or a stray tab mixed into spaced-out text, are invisible until something breaks, and hunting for them by eye rarely works.
It runs entirely client-side, so nothing you paste is ever uploaded to a server.
What Is Text Structure Visualizer?
A text structure visualizer that replaces every space with '·', every tab with '→', and every newline with '¶' followed by a real line break, turning invisible whitespace into visible symbols.
It runs entirely client-side as part of this site's String Tools collection, so nothing you paste is ever uploaded to a server.
How Text Structure Visualizer Works
The tool runs three sequential replacements over the input: tabs become '→', spaces become '·', and newlines become '¶' immediately followed by an actual newline so the original line structure is preserved.
The transformation happens synchronously in JavaScript the moment you type, with no network round trip involved.
When To Use Text Structure Visualizer
Use it to debug a diff or config file that behaves unexpectedly, check for trailing spaces before publishing, or confirm whether a document mixes tabs and spaces.
It's a fast way to get the answer without opening a code editor, a REPL, or writing a one-off script just to check.
Often used alongside Whitespace Remover and Find & Replace Tool.
Features
Advantages
- Distinguishes tabs from spaces at a glance, unlike most plain-text views.
- Preserves the original line breaks so the layout stays readable.
- Keeps a real newline after each pilcrow, so the visualized text still wraps line for line against the original and can be compared side by side.
Limitations
- Doesn't reveal other invisible characters like zero-width spaces or non-breaking spaces.
- Replaces the whitespace rather than annotating it, so the output cannot be pasted back and used as working text.
Examples
Best Practices & Notes
Best Practices
- Run text through this tool before diffing or committing it if formatting issues are suspected.
- Look first at the line ends, where trailing spaces are both the most common invisible problem and the easiest to overlook.
- Run it on a copy rather than the working file, since the markers are genuine substitutions and not decoration.
Developer Notes
Replacements run in the order tab, then space, then newline, via three chained `String.prototype.replace()` calls with global regexes; the newline replacement appends `\n` after the '¶' marker so the visualized text still renders as multiple lines.
Text Structure Visualizer Use Cases
- Debugging unexpected whitespace in a config or data file
- Checking for trailing spaces before publishing text
- Confirming whether a document mixes tabs and spaces
Common Mistakes
- Assuming all invisible characters are covered; only spaces, tabs, and newlines are visualized.
- Forgetting the visualized output isn't meant to be used as-is; copy the original text instead.
Tips
- Combine with a monospace font so the '·' and '→' symbols line up clearly with surrounding text.
- A line showing middle dots immediately before its pilcrow has trailing whitespace, which is exactly what most linters complain about.