Text Structure Visualizer

Turn your text into an abstract picture that shows its shape, density and layout.

As you type

Live mode is on by default, so the picture is redrawn the moment you type, paste or change a style - no button pressing while you experiment.

100% private

Everything happens in your own browser with plain JavaScript. Nothing you type, paste or upload is ever sent to a server.

Ten ways to draw it

Blocks, shade, bars, dots, small dots, outline, redact, hash, braille - or type any character you like and see your text drawn with it.

Overview

The Text Structure Visualizer turns a document into an abstract picture of itself. Every letter, digit and symbol is swapped for a block or a mark of your choice, while the spaces, tabs and line breaks stay exactly where they were. What is left is the skeleton of your page: how long each line runs, where the paragraphs and indented blocks sit, how heavy the text is, and how the whole thing is balanced. Designers call this old trick greeking - it is the same idea as the grey placeholder text in a website mock-up, except here you keep the true shape of your own writing instead of borrowing somebody else's filler.

The tool draws one glyph for every visible character, so the picture is a 1:1 copy of your text's geometry - columns never shift, and a line that was 62 characters long stays 62 glyphs wide. On top of that you can keep punctuation marks and the digits 0–9 in place so full stops and figures still read, expand tabs into real spaces, and wrap long lines to a fixed column width. A statistics panel reports lines, characters, words, blank lines, the longest and average line length, the number of glyphs drawn and the overall ink density, and the finished picture can be copied or downloaded as a text file.

So why is that useful? Because the words are usually the last thing you should worry about when you judge layout. Shading a page like this makes an over-long paragraph, a top-heavy section, a ragged column or an unbalanced two-page spread obvious at a glance - before you have chosen a font size, a column width or a final word count. The same picture answers questions such as "is this section too dense?", "do these two columns look similar in length?" or "how much white space does this page really have?", without reading a single sentence. It is also a quick way to give a mock-up a believable texture, and to produce redaction-style visuals or plain-text art.

It is written with plain vanilla JavaScript - no libraries and no frameworks - and runs entirely inside your browser. Your text is processed on your own device, never uploaded anywhere, and the page keeps working while you are offline once it has loaded. The only thing that leaves the tool is whatever you choose to copy or download.

What This Tool Does

It walks your text one character at a time and rebuilds it as a picture. Every character that is not a space is replaced by a single glyph of the selected style, while spaces, non-breaking spaces and line breaks are copied through untouched. That one-glyph-per-character rule is what keeps the layout honest: nothing is stretched, centred or re-flowed, so relative line lengths and paragraph widths survive the conversion exactly.

Two characters can be spared: with Preserve punctuation switched on, marks such as . , ; : ! ? - ( ) stay as themselves, which keeps sentence endings and dashes visible in the picture. With Preserve numbers on, the digits 0–9 stay as well, so timetables, price lists and report figures still make sense.

Two settings keep the picture tidy: Expand tabs replaces every tab with a chosen number of spaces, so indented code or a tab-aligned list does not collapse into a single column; Wrap long lines at hard-wraps the picture to a fixed number of columns, which is what you want when you are mocking up a narrow text column. Live mode redraws everything as you type, and Copy or Download takes the finished picture away as a plain text file.

Examples

Every example below loads its own text, style and options - click "Try it" and the picture is drawn straight away, because Live mode is on by default. Each output shown here was produced by this tool from the input beside it.

1. A paragraph as solid blocks

Four lines of a paragraph drawn as one solid slab. The spaces and line breaks are untouched, so the ragged right edge of the original paragraph is still visible, and because punctuation is preserved here the full stops, the comma and the semicolon show through the ink.

Input

Volunteers meet at the east gate on the first
Saturday of every month. Bring gloves, a bucket
and a reusable water bottle; we sort the litter,
log what we find, and finish with coffee.

Output – Blocks

â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆ â–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆ â–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆ
â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆ. â–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ, â–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ
â–ˆâ–ˆâ–ˆ â–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ; â–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ,
â–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆ, â–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ.

2. A poem as soft shade

The Shade style repeats a light-medium-dark grain, so the picture reads as texture rather than solid ink. Punctuation is not preserved in this example, so the commas and the full stops that end each line are absorbed into the grain. The grain is deterministic - the same line always produces the same pattern - so a mock-up never changes when you reload it.

Input

The keeper trims the lamp at dusk,
the gulls go quiet on the rail,
a slow beam sweeps the sleeping coast,
and morning finds the tide turned pale.

Output – Shade

â–‘â–’â–“ â–‘â–’â–“â–‘â–’â–“ â–‘â–’â–“â–‘â–’ â–“â–‘â–’ â–“â–‘â–’â–“ â–‘â–’ â–“â–‘â–’â–“â–‘
â–’â–“â–‘ â–’â–“â–‘â–’â–“ â–‘â–’ â–“â–‘â–’â–“â–‘ â–’â–“ â–‘â–’â–“ â–‘â–’â–“â–‘â–’
â–“ â–‘â–’â–“â–‘ â–’â–“â–‘â–’ â–“â–‘â–’â–“â–‘â–’ â–“â–‘â–’ â–“â–‘â–’â–“â–‘â–’â–“â–‘ â–’â–“â–‘â–’â–“â–‘
â–’â–“â–‘ â–’â–“â–‘â–’â–“â–‘â–’ â–“â–‘â–’â–“â–‘ â–’â–“â–‘ â–’â–“â–‘â–’ â–“â–‘â–’â–“â–‘â–’ â–“â–‘â–’â–“â–‘

3. A schedule with the times kept

Small Dots is the lightest style, so the picture stays subtle. Numbers and punctuation are preserved here, which is why the running order and the colon in 09:00 are still readable, and the hyphen in "Hands-on" survives too. The number of dots at the start of each line is a direct reading of how long that line is.

Input

Doors open at 09:00
Keynote and welcome at 09:30
Hands-on session 10:00 to 12:15
Lunch in the courtyard 12:30
Closing remarks at 16:45

Output – Small Dots

Â·Â·Â·Â·Â· Â·Â·Â·Â· Â·Â· 09:00
Â·Â·Â·Â·Â·Â·Â· Â·Â·Â· Â·Â·Â·Â·Â·Â·Â· Â·Â· 09:30
Â·Â·Â·Â·Â·-Â·Â· Â·Â·Â·Â·Â·Â·Â· 10:00 Â·Â· 12:15
Â·Â·Â·Â·Â· Â·Â· Â·Â·Â· Â·Â·Â·Â·Â·Â·Â·Â·Â· 12:30
Â·Â·Â·Â·Â·Â·Â· Â·Â·Â·Â·Â·Â·Â· Â·Â· 16:45

4. A report with a redacted look

The Redact style uses X, the familiar look of a censored document. Punctuation and digits are preserved in this example, so the date, the clock time, the brackets, the colons and the full stops all survive - which makes the redaction look deliberate instead of random. Remember that this is a visual effect only: the original text is still in the Input field, and nothing has been anonymized or deleted. If you need to hide data for real, use our Text Anonymizer instead.

Input

Incident report 2026-04-11 (storage cluster)
The on-call engineer restarted the node at 02:14.
Root cause: a full disk on the primary volume.
Action: alerts now fire at 80 percent capacity.

Output – Redact

XXXXXXXX XXXXXX 2026-04-11 (XXXXXXX XXXXXXX)
XXX XX-XXXX XXXXXXXX XXXXXXXXX XXX XXXX XX 02:14.
XXXX XXXXX: X XXXX XXXX XX XXX XXXXXXX XXXXXX.
XXXXXX: XXXXXX XXX XXXX XX 80 XXXXXXX XXXXXXXX.

Features & Options

Visualization styles: ten choices, picked from the swatch buttons under the text areas. They run from heavy to light: Blocks (â–ˆâ–ˆ) fills the page with solid slabs and is the easiest to judge at a distance; Shade (â–‘â–’â–“) cycles a light, medium and dark grain for a softer picture; Bars (â–¬â–¬) looks like ruled lines; Dots (â€¢â€¢) and Small Dots (Â·Â·) give a medium and a very light texture; Outline (â–¡â–¡) draws hollow boxes, which reads like a wireframe; Redact (XX) copies the look of a censored document; Hash (##) uses plain ASCII, so it survives any font, editor or encoding; and Braille (â£¿â£¿) packs the tightest pixel texture of all.

Custom style: pick Custom and the field below the swatches appears, where you can type any character or a short string. Each replaced character is drawn with it, so one single character keeps every column exactly as wide as it was, while a longer string stretches the picture. If the field is empty the tool draws ? instead.

"Riverside studio" drawn in every style

Input:      Riverside studio
Blocks      â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ
Shade       â–‘â–’â–“â–‘â–’â–“â–‘â–’â–“ â–‘â–’â–“â–‘â–’â–“
Bars        â–¬â–¬â–¬â–¬â–¬â–¬â–¬â–¬â–¬ â–¬â–¬â–¬â–¬â–¬â–¬
Dots        â€¢â€¢â€¢â€¢â€¢â€¢â€¢â€¢â€¢ â€¢â€¢â€¢â€¢â€¢â€¢
Small Dots  Â·Â·Â·Â·Â·Â·Â·Â·Â· Â·Â·Â·Â·Â·Â·
Outline     â–¡â–¡â–¡â–¡â–¡â–¡â–¡â–¡â–¡ â–¡â–¡â–¡â–¡â–¡â–¡
Redact      XXXXXXXXX XXXXXX
Hash        ######### ######
Braille     â£¿â£¿â£¿â£¿â£¿â£¿â£¿â£¿â£¿ â£¿â£¿â£¿â£¿â£¿â£¿
Custom (=)  ========= ======

The Options in Detail

Preserve punctuation: the usual marks - . , ; : ! ? " ' ( ) [ ] { } < > / \ | - _ – — + = * & % $ # @ ~ ^ … - stay as themselves instead of being drawn over, so you can still see where sentences end and where a dash splits a clause. Every letter, however, is still replaced. It is the difference between a picture that shows punctuation and one that does not:

Input

Design review today.

Preserve punctuation ON, then OFF (Blocks)

ON:  â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆ.
OFF: â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ â–ˆâ–ˆâ–ˆâ–ˆâ–ˆâ–ˆ

Preserve numbers: the digits 0–9 stay in place, so times, prices, page numbers and measurements keep their meaning and you can still tell a list of figures from a block of prose. With the switch off, every digit is drawn over like any other character:

Input

Item 42 costs 19.50

Preserve numbers ON, then OFF (Dots)

ON:  â€¢â€¢â€¢â€¢ 42 â€¢â€¢â€¢â€¢â€¢ 19.50
OFF: â€¢â€¢â€¢â€¢ â€¢â€¢ â€¢â€¢â€¢â€¢â€¢ â€¢â€¢.â€¢â€¢

Expand tabs: a tab is a single character but many columns wide on screen, so a tab-indented list would waste a whole indent level on one glyph. Turning this on rewrites every tab as a real number of spaces (1–16, four by default) before the picture is drawn, which restores the indentation. Turned off, the tab is copied through untouched and lands wherever your editor or browser decides:

Input

[tab]Tabbed line

Expand tabs OFF (the tab shown as \t), then ON with four spaces (Outline)

OFF: [\tâ–¡â–¡â–¡â–¡â–¡â–¡ â–¡â–¡â–¡â–¡]
ON:  [    â–¡â–¡â–¡â–¡â–¡â–¡ â–¡â–¡â–¡â–¡]

Wrap long lines at: set a number of columns and the finished picture is hard-wrapped to that width, breaking wherever the limit falls - mid-word included - so you can preview how copy would sit inside a fixed text column. The default value 0 keeps your original line lengths. Here one 50-character line becomes three columns of 20:

Input (one line, wrapped at 20 columns, Hash)

A long line of placeholder text that has to wrap.
# #### #### ## #####
###### #### #### ###
 ## ####.

Live mode: with this switched on, the picture is rebuilt automatically as you type, paste or change a style or option, with a short pause while you are typing so a long document stays responsive. Switch it off for a very large file and the tool redraws only when you press "Visualize Structure" - your text and your settings are kept either way.

Structure statistics: beside the options sits a panel of eight readouts that describe both your text and the drawing: lines, characters and words; blank lines; the longest line; the average line length; the number of glyphs drawn; and the ink density of the page. They follow every redraw, so two drafts can be compared without counting anything by hand.

Copy & Download: "Copy" puts the finished picture on your clipboard - ready to paste into a document, a mock-up file, a design brief or a chat message - and "Download" saves it as text-structure-visualizer.txt. The spaces and line breaks are part of the text, so the shape survives wherever you paste it, as long as that place uses a fixed-width (monospace) font.

Common Use Cases

Design and layout mock-ups: fill a wireframe with placeholder art that has exactly the density of the real copy, so whoever reviews it judges the layout instead of the words.

Judging density before you commit: see whether a section is too heavy, whether one paragraph runs twice as long as its neighbours, or whether a page has enough white space - all before choosing font sizes and column widths.

Presentation and document reviews: check a slide, a landing page or a book chapter for walls of text at a single glance, then decide what to cut.

Redaction-style visuals: a report, an archive page or a prop that looks properly censored. Keep in mind that this is cosmetic only - if you need the data itself hidden, use the Text Anonymizer.

Text art and typography teaching: turn ordinary writing into blocks-and-symbols pictures, and demonstrate greeking to clients, students or colleagues in a couple of seconds.

FAQs

FAQ 1: Does the tool change, save or delete my text?
Answer: No. The text you type or paste stays exactly as it is in the Input field; the picture is written into the separate Output field. Nothing is stored on a server or in an account, and closing the page discards everything you entered.

FAQ 2: Why do paragraphs pasted from Word or Google Docs come out as one very long line?
Answer: Because those programs do not store the line breaks you see - a paragraph is one long line that the program soft-wraps on screen, and the visualizer only sees real line breaks. Either set Wrap long lines at to the width of the column you are mocking up (the picture is then hard-wrapped for you), or add real line breaks to the text first with our Add Line Breaks tool.

FAQ 3: What does "ink density" mean?
Answer: It is the share of characters in your text that are not spaces, shown as a percentage. A reading of 82.1% means that roughly 82 out of every 100 characters get a glyph drawn for them, while the rest stay as white space. Comparing the density of two drafts tells you which one is the heavier read, even when both are the same length.

FAQ 4: Why do the rows of my picture look slightly uneven in some browsers?
Answer: Braille, block and box-drawing glyphs are drawn by whichever font your browser picks for them, and in a few fonts those glyphs are narrower than a letter. A line of â£¿ can therefore look a little shorter than the same line drawn in â–ˆ. The Output field itself always uses a fixed-width font, so what you copy keeps its columns; when a perfectly even block is what matters, Blocks, Shade, Bars and Hash are the safest choices.

FAQ 5: Can I invent my own style?
Answer: Yes. Choose Custom and type any character or short string into the field that appears below the swatches. A single character keeps every column exactly as wide as it was, while a longer string widens each replaced character and makes the picture wider than your text. If the field is left empty, the tool falls back to ?.

FAQ 6: How do I move the picture into a document, a slide or an image?
Answer: Press "Copy" (or "Download" the .txt file) and paste the text wherever you need it, then format it with a fixed-width font such as Consolas, Courier New or Menlo and keep the line breaks. Any fixed-width font holds the columns together, so the shape you saw on this page is exactly the shape you get in your document. In an image editor, paste the text into a text layer and choose a monospace font there as well.