Overview
Introduction
Framing a block of text with a clean ASCII or Unicode border by hand means carefully counting characters to keep every side straight, which quickly becomes error-prone.
It runs entirely client-side, so nothing you paste is ever uploaded to a server.
What Is Text Box Drawer?
A text box drawer that wraps the input in a Unicode box-drawing-character border, automatically sized to fit the longest line with 1-space padding inside.
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 Box Drawer Works
The tool finds the length of the longest line in the input, builds top and bottom border rows sized to that width plus padding, and wraps each line of text between vertical bar characters with 1 space of padding on each side.
The transformation happens synchronously in JavaScript the moment you type, with no network round trip involved.
When To Use Text Box Drawer
Use it to frame a message for a terminal banner, a README file, a code comment, or any plain-text context that supports Unicode.
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 Text Columnizer and String Repeater.
Features
Advantages
- Automatically sizes the box to fit the longest line, no manual measuring needed.
- Keeps every line's box edges perfectly aligned via consistent padding.
- Sizes the border from the longest line across the whole input, so a multi-line block comes out as a single clean rectangle rather than ragged rows.
Limitations
- Requires a monospace font to display correctly; the box will look misaligned in a proportional font.
- Measures lines by character count, so text containing emoji or wide CJK characters produces a border that does not visually line up.
Examples
Best Practices & Notes
Best Practices
- View or paste the output into a monospace context, like a terminal or code block, so the border stays aligned.
- Trim your lines to similar lengths before drawing, since a single very long line stretches the entire box out to match it.
- Paste the result inside a fenced code block when posting to markdown, which preserves both the monospace font and the exact spacing.
Developer Notes
The border width is `Math.max(...lines.map((line) => line.length)) + 2` to account for the 1-space padding on each side, and every line is padded with `line.padEnd(width, " ")` before being wrapped in `│ ` and ` │`, keeping the right edge straight even when line lengths vary.
Text Box Drawer Use Cases
- Framing a terminal banner or startup message
- Highlighting a note or warning in a README or plain-text file
- Adding a decorative border to a short piece of ASCII art
Common Mistakes
- Viewing the output in a proportional font, where the border won't align correctly.
- Expecting the box to auto-wrap long lines; it only pads to the longest existing line.
Tips
- Keep each input line reasonably short so the resulting box stays a manageable width.
- The border characters come from the Unicode box-drawing block, so they survive copy-paste into terminals and README files with no escaping needed.