Last checked by the TextEditor.com team
Draw a box or table and copy it as text
Drag on the grid to draw. Where two lines meet, the tool picks the right joint for you, like ┼ where they cross or ├ where a line leaves a wall. Pick the line style first: light, heavy, double, rounded or dashed.
Box mode draws a whole rectangle in one drag. Text mode puts a label in the cells you click. Fill paints a whole closed area with blocks or shades in one click, like the paint bucket in an image editor. Erase clears cells.
The "Table from data" tab turns rows of data into a table. Type cells with commas between them, or paste them straight from Excel or Google Sheets. The "Folder tree" tab turns an indented list into a tree like the one the tree command prints in a terminal.
Copy the result as plain text, or as a Markdown code block for GitHub, Discord and Slack. If you only need a frame around a few words, the text frame generator sizes the box to fit your text.
┌───────┬───────┐ │ Name │ Score │ ├───────┼───────┤ │ Ana │ 12 │ │ Ben │ 9 │ │ Carla │ 15 │ └───────┴───────┘
┏━━━━━━━┳━━━━━━━┓ ┃ Name ┃ Score ┃ ┣━━━━━━━╋━━━━━━━┫ ┃ Ana ┃ 12 ┃ ┃ Ben ┃ 9 ┃ ┃ Carla ┃ 15 ┃ ┗━━━━━━━┻━━━━━━━┛
╔═══════╦═══════╗ ║ Name ║ Score ║ ╠═══════╬═══════╣ ║ Ana ║ 12 ║ ║ Ben ║ 9 ║ ║ Carla ║ 15 ║ ╚═══════╩═══════╝
The box drawing pieces and their names
Every piece has a Unicode name that lists its arms. ┌ is "box drawings light down and right", because its arms point down and to the right. "Vertical" means up and down, and "horizontal" means left and right. So ┼ is "light vertical and horizontal".
Pieces that mix two weights name each one. ┞ is "up heavy and right down light": a heavy arm up, and light arms to the right and down. Click a piece below to copy it, or right click it to see its name and codes.
| Piece | Light | Heavy | Double | Rounded |
|---|---|---|---|---|
| Top left corner | ||||
| Top right corner | ||||
| Bottom left corner | ||||
| Bottom right corner | ||||
| T, down from a top edge | none | |||
| T, up from a bottom edge | none | |||
| T, right from a left edge | none | |||
| T, left from a right edge | none | |||
| Cross | none | |||
| Horizontal line | none | |||
| Vertical line | none |
The Box Drawing block has 128 characters, from U+2500 to U+257F. No piece joins a double line to a heavy one, so the drawing tool makes the heavy arm light where the two meet. Rounded pieces exist only for the four corners, in light lines.
HTML has named codes for 40 of the pieces, like ┌ for ┌ and ═ for ═. These 40 are the same ones the first IBM PC had.
Where these characters came from
The IBM PC came out in 1981 with a character set now called code page 437. Next to letters and numbers, it had 40 box drawing pieces, three shades and five solid blocks. Programs on the text screen used them to draw windows, menus and frames.
Many Windows PCs still know these old codes. Hold Alt and type 201 on the number pad, and you get ╔. Alt+205 gives ═ and Alt+219 gives █.
1981
The IBM PC uses code page 437, with single and double lines, shades and blocks.
1993
Unicode 1.1 has all 128 box drawing pieces of today, light and heavy ones included.
2002
Unicode 3.2 adds ten quadrant blocks, which split a cell into four squares.
2020
Unicode 13.0 adds Symbols for Legacy Computing, from old home computers and teletext.
2024
Unicode 16.0 adds a second block of them, with octants that split a cell into 2 by 4.
Teletext pages on TV drew pictures with cells split into 2 by 3 squares. Unicode calls these sextants, and it has 60 of them. Few fonts draw the legacy blocks yet, so check them on your device before you use them. The picker above lists both blocks under "Legacy computing".
Dial-up bulletin boards of the 1980s and 1990s used code page 437 with color codes to draw whole pictures. That style is called ANSI art, after the ANSI color codes it uses. Wikipedia keeps a list of box drawing sets from other old computers, like the Commodore 64 and the ZX Spectrum. For pictures made from letters and signs, see the ASCII art pictures.
Block and shade characters
Block characters fill part or all of a character cell. █ is the full block. ▀ and ▄ fill the top or bottom half. The eighth blocks fill one to seven eighths, from the bottom (▁ to ▇) or from the left (▏ to ▉). The shades ░ ▒ ▓ are light, medium and dark.
Eighth blocks make neat bar charts in plain text. Type a label and a number on each line below. A bar can end partway through a cell, so small differences still show.
Mon ██████████▍ 12 Tue ████████████████▌ 19 Wed ██████▏ 7 Thu ████████████████████ 23 Fri █████████████▌ 15.5
Sparkline: ▃▆▁█▅
The sparkline uses the lower blocks ▁ to █, one character for each number. It fits a whole series into one line of a README or a chat message.
The same blocks build big letters. The big text letters page has styles made of █, ▀ and ▄, plus pipes and shades. For squares, circles and stars that stand alone, see the shape symbols.
Why my box lines don't line up
Box drawing only works when every character is the same width. That is true in a monospace font, like the ones in code editors and terminals. In a normal font, ─ and a letter have different widths, so the right edge wobbles.
┌────────┬─────┐ │ Fruit │ Qty │ ├────────┼─────┤ │ Apples │ 12 │ │ Kiwi │ 3 │ └────────┴─────┘
┌────────┬─────┐ │ Fruit │ Qty │ ├────────┼─────┤ │ Apples │ 12 │ │ Kiwi │ 3 │ └────────┴─────┘
A few other things break the lines. Some chat apps and email programs swap your font for their own. Line spacing that is too tall leaves gaps between the │ pieces. And some Chinese, Japanese and Korean fonts draw box pieces two cells wide, which pushes the rest of the line out.
The fix is a code block. In Markdown, put three backticks (```) on the line before the drawing and on the line after it. GitHub, Discord and Slack show code blocks in a monospace font. The "Copy as Markdown" button adds the backticks for you.