Developer & Retro Toys
ASCII ART GENERATOR
Turn any text into awesome retro ASCII art banners for code header comments, terminal apps, README files, and social posts.
Developer Reference
Core Algorithm & Standalone Script
Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.
// Embedded ASCII Font maps for zero-dependency speed
const FONTS = {
standard: {
A: [" █████ ", " ██ ██ ", " ███████ ", " ██ ██ ", " ██ ██ "],
B: [" ██████ ", " ██ ██ ", " ██████ ", " ██ ██ ", " ██████ "],
C: [" ██████ ", " ██ ", " ██ ", " ██ ", " ██████ "],
D: [" ██████ ", " ██ ██ ", " ██ ██ ", " ██ ██ ", " ██████ "],
E: [" ███████ ", " ██ ", " █████ ", " ██ ", " ███████ "],
F: [" ███████ ", " ██ ", " █████ ", " ██ ", " ██ "],
G: [" ██████ ", " ██ ", " ██ ██ ", " ██ ██ ", " ██████ "],
H: [" ██ ██ ", " ██ ██ ", " ███████ ", " ██ ██ ", " ██ ██ "],
I: [" ███████ ", " ██ ", " ██ ", " ██ ", " ███████ "],
J: [" ██ ", " ██ ", " ██ ", " ██ ██ ", " █████ "],
K: [" ██ ██ ", " ██ ██ ", " █████ ", " ██ ██ ", " ██ ██ "],
L: [" ██ ", " ██ ", " ██ ", " ██ ", " ███████ "],
M: [" ███ ███ ", " ████ ████ ", " ██ ████ ██ ", " ██ ██ ██ ", " ██ ██ "],
N: [" ███ ██ ", " ████ ██ ", " ██ ██ ██ ", " ██ ██ ██ ", " ██ ████ "],
O: [" ██████ ", " ██ ██ ", " ██ ██ ", " ██ ██ ", " ██████ "],
P: [" ██████ ", " ██ ██ ", " ██████ ", " ██ ", " ██ "],
Q: [" ██████ ", " ██ ██ ", " ██ ██ ", " ██ █ ██ ", " ███████ "],
R: [" ██████ ", " ██ ██ ", " ██████ ", " ██ ██ ", " ██ ██ "],
S: [" ██████ ", " ██ ", " █████ ", " ██ ", " ██████ "],
T: [" █████████ ", " ██ ", " ██ ", " ██ ", " ██ "],
U: [" ██ ██ ", " ██ ██ ", " ██ ██ ", " ██ ██ ", " █████ "],
V: [" ██ ██ ", " ██ ██ ", " ██ ██ ", " ██ ██ ", " ████ "],
W: [" ██ ██ ", " ██ ██ ██ ", " ██ ██ ██ ", " ████ ████ ", " ██ ██ "],
X: [" ██ ██ ", " ██ ██ ", " ███ ", " ██ ██ ", " ██ ██ "],
Y: [" ██ ██ ", " ██ ██ ", " ███ ", " ██ ", " ██ "],
Z: [" ███████ ", " ██ ", " ██ ", " ██ ", " ███████ "],
" ": [" ", " ", " ", " ", " "],
"0": [" ██████ ", " ██ ████ ", " ██ ██ ██ ", " ████ ██ ", " ██████ "],
"1": [" ██ ", " ████ ", " ██ ", " ██ ", " ██████ "],
"2": [" ██████ ", " ██ ", " █████ ", " ██ ", " ███████ "],
"!": [" ██ ", " ██ ", " ██ ", " ", " ██ "],
"-": [" ", " ", " ██████ ", " ", " "]
},
slant: {
A: [" /\\ ", " / \\ ", " / /\\ \\ ", "/ ____ \\", "/_/ \\_\\"],
B: [" ____ ", " | _ \\ ", " | |_) |", " | _ < ", " |____/ "],
C: [" ____ ", " / ___|", " | | ", " | |___ ", " \\____|"],
D: [" ____ ", " | _ \\ ", " | | | |", " | |_| |", " |____/ "],
E: [" _____ ", " | ____|", " | _| ", " | |___ ", " |_____|"],
F: [" _____ ", " | ___|", " | |_ ", " | _| ", " |_| "],
G: [" ____ ", " / ___|", " | | _ ", " | |_| |", " \\____|"],
H: [" _ _ ", " | | | |", " | |_| |", " | _ |", " |_| |_|"],
I: [" ██ ", " ██ ", " ██ ", " ██ ", " ██ "],
J: [" ██ ", " ██ ", " ██ ", " ██ ██ ", " ████ "],
K: [" _ __ ", " | |/ / ", " | ' / ", " | . \\ ", " |_|\\_\\ "],
L: [" _ ", " | | ", " | | ", " | |___ ", " |_____|"],
M: [" ███ ███ ", " ████████ ", " ██ ██ ██ ", " ██ ██ ", " ██ ██ "],
N: [" ███ ██ ", " ████ ██ ", " ██ ████ ", " ██ ███ ", " ██ ██ "],
O: [" ████ ", " ██ ██ ", " ██ ██ ", " ██ ██ ", " ████ "],
P: [" █████ ", " ██ ██ ", " █████ ", " ██ ", " ██ "],
Q: [" ████ ", " ██ ██ ", " ██ ██ ", " ██ █ ██ ", " ████ █ "],
R: [" █████ ", " ██ ██ ", " █████ ", " ██ ██ ", " ██ ██ "],
S: [" █████ ", " ██ ", " ████ ", " ██ ", " █████ "],
T: [" ███████ ", " ██ ", " ██ ", " ██ ", " ██ "],
U: [" ██ ██ ", " ██ ██ ", " ██ ██ ", " ██ ██ ", " █████ "],
V: [" ██ ██ ", " ██ ██ ", " ██ ██ ", " ██ ██ ", " ███ "],
W: [" ██ ██ ", " ██ █ ██ ", " ██ █ █ ██ ", " ███ ███ ", " ██ ██ "],
X: [" ██ ██ ", " ██ ██ ", " ███ ", " ██ ██ ", " ██ ██ "],
Y: [" ██ ██ ", " ██ ██ ", " ███ ", " ██ ", " ██ "],
Z: [" ███████ ", " ██ ", " ██ ", " ██ ", " ███████ "],
" ": [" ", " ", " ", " ", " "]
}
};
let generatedAsciiText = '';
const textInput = document.getElementById('text-input');
const fontSelect = document.getElementById('font-select');
const themeSelect = document.getElementById('theme-select');
const checkUpper = document.getElementById('check-upper');
const asciiOutput = document.getElementById('ascii-output');
const toast = document.getElementById('toast');
function showToast(msg) {
toast.textContent = msg;
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2000);
}
function renderAscii() {
let rawText = textInput.value || 'TOOLPAD';
if (checkUpper.checked) rawText = rawText.toUpperCase();
const fontKey = FONTS[fontSelect.value] ? fontSelect.value : 'standard';
const fontMap = FONTS[fontKey];
const lines = ["", "", "", "", ""];
for (let char of rawText) {
const charGlyph = fontMap[char] || fontMap['?'] || fontMap[' '];
for (let i = 0; i < 5; i++) {
lines[i] += charGlyph[i] || ' ';
}
}
generatedAsciiText = lines.join('\n');
asciiOutput.textContent = generatedAsciiText;
asciiOutput.className = 'ascii-display ' + themeSelect.value;
}
textInput.addEventListener('input', renderAscii);
fontSelect.addEventListener('change', renderAscii);
themeSelect.addEventListener('change', renderAscii);
checkUpper.addEventListener('change', renderAscii);
document.getElementById('btn-copy-raw').addEventListener('click', () => {
navigator.clipboard.writeText(generatedAsciiText);
showToast('Raw ASCII copied!');
});
document.getElementById('btn-copy-comment').addEventListener('click', () => {
const comment = `/*\n${generatedAsciiText.split('\n').map(l => ' * ' + l).join('\n')}\n */`;
navigator.clipboard.writeText(comment);
showToast('Code Comment copied!');
});
document.getElementById('btn-copy-markdown').addEventListener('click', () => {
const md = "```\n" + generatedAsciiText + "\n```";
navigator.clipboard.writeText(md);
showToast('Markdown block copied!');
});
// Init
renderAscii();