Is every cell's color truly independent?

Yes. Each cell stores its own character and its own color (or no color at all), so you can freely mix colors within a single line, not just apply one color to a whole stroke or the whole grid.

How do the exported escape codes work?

Normal-intensity colors use \x1B[3Xm (X = 0-7 for black through white) and bright colors use \x1B[9Xm (the aixterm bright-foreground range), rather than the bold-plus-normal-color convention some terminals also support. Consecutive same-color cells in a row are compressed into one escape code covering the whole run, followed by a \x1B[0m reset, instead of repeating an escape code before every single character.

Where can I actually see the colors?

The grid itself renders each cell's character in its assigned color as you edit, and a separate read-only preview block below shows the same colored grid. To see the real ANSI escape codes in effect, paste the exported text into an actual ANSI-aware terminal or terminal emulator, most plain text viewers will show the raw escape bytes instead of colors.

How is this different from the ASCII Art Editor?

ASCII Art Editor is plain monospace text only, one grid, no color. This tool adds a per-cell foreground color you paint with before/while typing, and its export includes real ANSI SGR color escape codes alongside the character grid.

ANSI Art Editor - Draw Color Text Art With Real ANSI Codes

Overview

Introduction

ANSI art extends plain ASCII art with color, using the same escape-code system real terminals use to color text, so a piece of art can have red borders, green highlights, or any mix of the 16 classic terminal colors.

This editor lets you paint that color directly onto a character grid and export it as text carrying genuine ANSI SGR color codes, not just a visual mockup.

What Is ANSI Art Editor?

A per-cell color character-grid editor: every cell holds one character and one optional foreground color, chosen from the 16 standard ANSI terminal colors (8 normal, 8 bright).

Clicking a color swatch sets the current "paint" color; clicking or typing into a grid cell applies that color to the cell, so both retouching an existing character's color and typing new colored characters use the same workflow.

How ANSI Art Editor Works

The grid is a flat array of cells, each with a character and a color key (or null for no color/default foreground), sized to your configured columns x rows.

Typing a character into a focused cell sets that cell's character and colors it with the currently selected paint color, then automatically advances focus to the next cell; clicking a cell (without typing) repaints its existing character with the current paint color.

Export walks each row left to right, emitting one ANSI SGR foreground escape code whenever the color changes (not once per character) followed by a reset code at the end of every colored run, producing compact, standards-correct ANSI-colored text.

When To Use ANSI Art Editor

Use it to design colored terminal banners, BBS-style colored text art, or colorful ASCII logos meant to be viewed in a real terminal.

Also useful for prototyping how a colored CLI splash screen or startup banner will look before hardcoding escape codes into a script.

Often used alongside ASCII Art Editor, ASCII Animation Creator and ASCII to GIF Converter.

Features

Advantages

True independent per-cell color, not a single global color applied to the whole grid or stroke.
Exports real, standards-correct ANSI SGR escape codes rather than a color-name placeholder format.
Compresses consecutive same-color runs into one escape code per run instead of one per character, keeping exported text compact.

Limitations

Only foreground color is supported, no background color, bold/italic/underline attributes, or 256-color/truecolor extended codes, just the 16 standard SGR foreground colors.
The exported escape codes only render as color in an ANSI-aware terminal or terminal emulator; pasting into a plain text field shows the literal escape bytes.
Grid size is capped (50 columns x 20 rows) to keep the per-cell editor responsive.

Examples

A single red character

Input

One cell, character "X", color red

Output

\x1B[31mX\x1B[0m

Red (SGR 31) is emitted before the character and reset (SGR 0) immediately after, since the colored run is just one cell.

A row mixing default and bright green text

Input

"HI " (no color) followed by "OK" (bright green)

Output

HI \x1B[92mOK\x1B[0m

The uncolored run needs no escape code at all; the bright green run (SGR 92, the 90-97 bright range) gets one escape code covering both "O" and "K", then a single reset.

Best Practices & Notes

Best Practices

Pick your paint color before typing a run of same-colored characters, switching colors mid-typing still works but produces more, shorter color runs in the export.
Preview the read-only rendered block below the grid to check colors before exporting, since a plain text editor won't show the escape codes as color.

Developer Notes

Scope decision: this implements true independent per-cell color (an `AnsiCell = { char, colorKey }` grid) with real color-run compression on export, the fuller of the two options the spec allowed, rather than a single global color per paint stroke, since per-cell color is what actually distinguishes ANSI art from plain ASCII art. The interactive grid is built from one native `<input maxLength={1}>` per cell (memoized per-cell component) rather than a canvas, so typing/focus/arrow-key navigation can reuse native input behavior instead of a hand-rolled keyboard handler; clicking a cell or typing into it both apply the currently selected paint color. `exportAnsiGrid()` in the lib file does the actual run-length color compression and is fully DOM-free and unit-testable.

ANSI Art Editor Use Cases

Designing a colored ANSI banner or splash screen for a CLI tool or terminal script
Recreating BBS-style colored text art
Prototyping colored terminal output before hardcoding ANSI escape codes by hand

Common Mistakes

Pasting the exported text into a plain (non-ANSI-aware) text field and expecting to see color, the escape codes only render as color in a real terminal.
Assuming bold or background color are supported, only the 16 standard foreground colors are available here.

Tips

Use the Default swatch to explicitly clear a cell's color back to the terminal's default foreground rather than leaving stray color from an earlier edit.
Keep related colored elements on contiguous cells within a row where possible, it keeps the exported escape-code runs shorter and the file smaller.

ANSI Art Editor