[{"data":1,"prerenderedAt":952},["ShallowReactive",2],{"guide-ascii-banners-cli-tools":3},{"id":4,"title":5,"body":6,"date":944,"description":945,"extension":946,"meta":947,"navigation":136,"path":948,"readingTime":146,"seo":949,"stem":950,"__hash__":951},"guides\u002Fguides\u002Fascii-banners-cli-tools.md","Creating ASCII Banners for CLI Tools: Splash Screens and Help Text",{"type":7,"value":8,"toc":934},"minimark",[9,26,31,34,63,76,80,83,160,163,171,174,275,278,282,285,396,399,425,429,432,438,606,612,618,624,721,727,731,813,816,834,869,873,893,897,918,922,930],[10,11,12,13,17,18,21,22,25],"p",{},"ASCII banners are the signature visual element of command-line tools. When someone runs ",[14,15,16],"code",{},"nuxt",", ",[14,19,20],{},"deno",", or ",[14,23,24],{},"neofetch",", the ASCII banner establishes identity before any output appears. Well-designed banners make your CLI tool feel polished and professional; poorly designed ones create alignment issues and encoding headaches.",[27,28,30],"h2",{"id":29},"why-cli-tools-use-ascii-banners","Why CLI Tools Use ASCII Banners",[10,32,33],{},"ASCII banners serve several practical functions in CLI tools:",[35,36,37,45,51,57],"ul",{},[38,39,40,44],"li",{},[41,42,43],"strong",{},"Brand recognition"," — users instantly identify the tool from the banner, even in shared screen recordings",[38,46,47,50],{},[41,48,49],{},"Version display"," — banners often incorporate the version number, making bug reports more accurate",[38,52,53,56],{},[41,54,55],{},"Session framing"," — a banner marks the boundary between shell commands and tool output",[38,58,59,62],{},[41,60,61],{},"Onboarding cue"," — for interactive tools, the banner signals that the program is running and waiting for input",[10,64,65,66,17,69,17,72,75],{},"Not every CLI tool needs a banner. Short-lived commands (",[14,67,68],{},"ls",[14,70,71],{},"grep",[14,73,74],{},"cat",") should print output and exit immediately. Banners make sense for interactive tools, long-running processes, and commands that start a distinct session.",[27,77,79],{"id":78},"figlet-and-banner-generators","FIGlet and Banner Generators",[10,81,82],{},"FIGlet is the original ASCII text banner tool, created in 1991. It reads a font definition and renders input text as large ASCII letters.",[84,85,90],"pre",{"className":86,"code":87,"language":88,"meta":89,"style":89},"language-bash shiki shiki-themes github-light github-dark","# Install FIGlet\napt install figlet     # Debian\u002FUbuntu\nbrew install figlet    # macOS\n\n# Generate a banner\nfiglet -f slant \"MyTool\"\n","bash","",[14,91,92,101,118,131,138,144],{"__ignoreMap":89},[93,94,97],"span",{"class":95,"line":96},"line",1,[93,98,100],{"class":99},"sJ8bj","# Install FIGlet\n",[93,102,104,108,112,115],{"class":95,"line":103},2,[93,105,107],{"class":106},"sScJk","apt",[93,109,111],{"class":110},"sZZnC"," install",[93,113,114],{"class":110}," figlet",[93,116,117],{"class":99},"     # Debian\u002FUbuntu\n",[93,119,121,124,126,128],{"class":95,"line":120},3,[93,122,123],{"class":106},"brew",[93,125,111],{"class":110},[93,127,114],{"class":110},[93,129,130],{"class":99},"    # macOS\n",[93,132,134],{"class":95,"line":133},4,[93,135,137],{"emptyLinePlaceholder":136},true,"\n",[93,139,141],{"class":95,"line":140},5,[93,142,143],{"class":99},"# Generate a banner\n",[93,145,147,150,154,157],{"class":95,"line":146},6,[93,148,149],{"class":106},"figlet",[93,151,153],{"class":152},"sj4cs"," -f",[93,155,156],{"class":110}," slant",[93,158,159],{"class":110}," \"MyTool\"\n",[10,161,162],{},"Output:",[84,164,169],{"className":165,"code":167,"language":168},[166],"language-text","   __  __       _\n  |  \\\u002F  | __ _| |_ ___ _ __\n  | |\\\u002F| |\u002F _` | __\u002F _ \\ '__|\n  | |  | | (_| | ||  __\u002F |\n  |_|  |_|\\__,_|\\__\\___|_|\n","text",[14,170,167],{"__ignoreMap":89},[10,172,173],{},"FIGlet includes over 300 built-in fonts. Popular choices for CLI tools:",[175,176,177,193],"table",{},[178,179,180],"thead",{},[181,182,183,187,190],"tr",{},[184,185,186],"th",{},"Font",[184,188,189],{},"Style",[184,191,192],{},"Best For",[194,195,196,210,223,236,249,262],"tbody",{},[181,197,198,204,207],{},[199,200,201],"td",{},[14,202,203],{},"slant",[199,205,206],{},"Italic, compact",[199,208,209],{},"Modern tools, dev utilities",[181,211,212,217,220],{},[199,213,214],{},[14,215,216],{},"banner",[199,218,219],{},"Blocky, wide",[199,221,222],{},"High-impact splash screens",[181,224,225,230,233],{},[199,226,227],{},[14,228,229],{},"small",[199,231,232],{},"Compact, readable",[199,234,235],{},"Tools with limited terminal space",[181,237,238,243,246],{},[199,239,240],{},[14,241,242],{},"standard",[199,244,245],{},"Classic, balanced",[199,247,248],{},"General purpose",[181,250,251,256,259],{},[199,252,253],{},[14,254,255],{},"shadow",[199,257,258],{},"3D shadow effect",[199,260,261],{},"Eye-catching branding",[181,263,264,269,272],{},[199,265,266],{},[14,267,268],{},"graffiti",[199,270,271],{},"Thick, rounded",[199,273,274],{},"Casual or creative tools",[10,276,277],{},"You can browse and preview all FIGlet fonts using our ASCII Art generator tool.",[27,279,281],{"id":280},"embedding-banners-in-your-tool","Embedding Banners in Your Tool",[10,283,284],{},"For production CLI tools, embed the banner as a string constant rather than depending on FIGlet at runtime:",[84,286,290],{"className":287,"code":288,"language":289,"meta":89,"style":89},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F banners.js\nexport const BANNER = `\n  ╔════════════════════════════════════╗\n  ║   __  __       _                  ║\n  ║  |  \\\\\u002F  | __ _| |_ ___ _ __       ║\n  ║  | |\\\\\u002F| |\u002F _\\` | __\u002F _ \\\\ '__|      ║\n  ║  | |  | | (_| | ||  __\u002F |         ║\n  ║  |_|  |_|\\\\__,_|\\\\__\\\\___|_|  v1.0   ║\n  ╚════════════════════════════════════╝\n`\n","javascript",[14,291,292,297,315,320,325,336,357,363,384,390],{"__ignoreMap":89},[93,293,294],{"class":95,"line":96},[93,295,296],{"class":99},"\u002F\u002F banners.js\n",[93,298,299,303,306,309,312],{"class":95,"line":103},[93,300,302],{"class":301},"szBVR","export",[93,304,305],{"class":301}," const",[93,307,308],{"class":152}," BANNER",[93,310,311],{"class":301}," =",[93,313,314],{"class":110}," `\n",[93,316,317],{"class":95,"line":120},[93,318,319],{"class":110},"  ╔════════════════════════════════════╗\n",[93,321,322],{"class":95,"line":133},[93,323,324],{"class":110},"  ║   __  __       _                  ║\n",[93,326,327,330,333],{"class":95,"line":140},[93,328,329],{"class":110},"  ║  |  ",[93,331,332],{"class":152},"\\\\",[93,334,335],{"class":110},"\u002F  | __ _| |_ ___ _ __       ║\n",[93,337,338,341,343,346,349,352,354],{"class":95,"line":146},[93,339,340],{"class":110},"  ║  | |",[93,342,332],{"class":152},[93,344,345],{"class":110},"\u002F| |\u002F _",[93,347,348],{"class":152},"\\`",[93,350,351],{"class":110}," | __\u002F _ ",[93,353,332],{"class":152},[93,355,356],{"class":110}," '__|      ║\n",[93,358,360],{"class":95,"line":359},7,[93,361,362],{"class":110},"  ║  | |  | | (_| | ||  __\u002F |         ║\n",[93,364,366,369,371,374,376,379,381],{"class":95,"line":365},8,[93,367,368],{"class":110},"  ║  |_|  |_|",[93,370,332],{"class":152},[93,372,373],{"class":110},"__,_|",[93,375,332],{"class":152},[93,377,378],{"class":110},"__",[93,380,332],{"class":152},[93,382,383],{"class":110},"___|_|  v1.0   ║\n",[93,385,387],{"class":95,"line":386},9,[93,388,389],{"class":110},"  ╚════════════════════════════════════╝\n",[93,391,393],{"class":95,"line":392},10,[93,394,395],{"class":110},"`\n",[10,397,398],{},"This approach has several advantages:",[35,400,401,407,413,419],{},[38,402,403,406],{},[41,404,405],{},"Zero dependencies"," — no FIGlet binary required on the user's machine",[38,408,409,412],{},[41,410,411],{},"Deterministic output"," — the banner looks identical on every system",[38,414,415,418],{},[41,416,417],{},"Fast startup"," — no font loading or rendering at runtime",[38,420,421,424],{},[41,422,423],{},"Customizable"," — you can hand-tweak alignment, add borders, or embed version numbers",[27,426,428],{"id":427},"layout-and-alignment-techniques","Layout and Alignment Techniques",[10,430,431],{},"ASCII banners must respect the terminal width. Standard terminals are 80 columns wide; modern setups often use 120–180 columns. Design for the minimum.",[10,433,434,437],{},[41,435,436],{},"Padding",": Center the banner with equal left\u002Fright margins:",[84,439,441],{"className":287,"code":440,"language":289,"meta":89,"style":89},"function centerBanner(banner, width = 80) {\n  return banner.split('\\n').map(line => {\n    const padding = Math.max(0, Math.floor((width - line.length) \u002F 2))\n    return ' '.repeat(padding) + line\n  }).join('\\n')\n}\n",[14,442,443,471,508,559,582,601],{"__ignoreMap":89},[93,444,445,448,451,455,458,460,463,465,468],{"class":95,"line":96},[93,446,447],{"class":301},"function",[93,449,450],{"class":106}," centerBanner",[93,452,454],{"class":453},"sVt8B","(",[93,456,216],{"class":457},"s4XuR",[93,459,17],{"class":453},[93,461,462],{"class":457},"width",[93,464,311],{"class":301},[93,466,467],{"class":152}," 80",[93,469,470],{"class":453},") {\n",[93,472,473,476,479,482,484,487,490,492,495,498,500,502,505],{"class":95,"line":103},[93,474,475],{"class":301},"  return",[93,477,478],{"class":453}," banner.",[93,480,481],{"class":106},"split",[93,483,454],{"class":453},[93,485,486],{"class":110},"'",[93,488,489],{"class":152},"\\n",[93,491,486],{"class":110},[93,493,494],{"class":453},").",[93,496,497],{"class":106},"map",[93,499,454],{"class":453},[93,501,95],{"class":457},[93,503,504],{"class":301}," =>",[93,506,507],{"class":453}," {\n",[93,509,510,513,516,518,521,524,526,529,532,535,538,541,544,547,550,553,556],{"class":95,"line":120},[93,511,512],{"class":301},"    const",[93,514,515],{"class":152}," padding",[93,517,311],{"class":301},[93,519,520],{"class":453}," Math.",[93,522,523],{"class":106},"max",[93,525,454],{"class":453},[93,527,528],{"class":152},"0",[93,530,531],{"class":453},", Math.",[93,533,534],{"class":106},"floor",[93,536,537],{"class":453},"((width ",[93,539,540],{"class":301},"-",[93,542,543],{"class":453}," line.",[93,545,546],{"class":152},"length",[93,548,549],{"class":453},") ",[93,551,552],{"class":301},"\u002F",[93,554,555],{"class":152}," 2",[93,557,558],{"class":453},"))\n",[93,560,561,564,567,570,573,576,579],{"class":95,"line":133},[93,562,563],{"class":301},"    return",[93,565,566],{"class":110}," ' '",[93,568,569],{"class":453},".",[93,571,572],{"class":106},"repeat",[93,574,575],{"class":453},"(padding) ",[93,577,578],{"class":301},"+",[93,580,581],{"class":453}," line\n",[93,583,584,587,590,592,594,596,598],{"class":95,"line":140},[93,585,586],{"class":453},"  }).",[93,588,589],{"class":106},"join",[93,591,454],{"class":453},[93,593,486],{"class":110},[93,595,489],{"class":152},[93,597,486],{"class":110},[93,599,600],{"class":453},")\n",[93,602,603],{"class":95,"line":146},[93,604,605],{"class":453},"}\n",[10,607,608,611],{},[41,609,610],{},"Box drawing",": Add borders to frame the banner:",[84,613,616],{"className":614,"code":615,"language":168},[166],"┌──────────────────────────┐\n│  _   _      _            │\n│ | | | | ___| |_ __ ___  │\n│ | |_| |\u002F _ \\ | '_ ` _ \\ │\n│ |  _  |  __\u002F | | | | | |│\n│ |_| |_|\\___|_|_| |_| |_|│\n└──────────────────────────┘\n",[14,617,615],{"__ignoreMap":89},[10,619,620,623],{},[41,621,622],{},"Color",": Use ANSI escape codes for colored banners:",[84,625,627],{"className":287,"code":626,"language":289,"meta":89,"style":89},"const cyan = '\\x1b[36m'\nconst bold = '\\x1b[1m'\nconst reset = '\\x1b[0m'\n\nconsole.log(`${bold}${cyan}${BANNER}${reset}`)\n",[14,628,629,648,664,680,684],{"__ignoreMap":89},[93,630,631,634,637,639,642,645],{"class":95,"line":96},[93,632,633],{"class":301},"const",[93,635,636],{"class":152}," cyan",[93,638,311],{"class":301},[93,640,641],{"class":110}," '",[93,643,644],{"class":152},"\\x1b",[93,646,647],{"class":110},"[36m'\n",[93,649,650,652,655,657,659,661],{"class":95,"line":103},[93,651,633],{"class":301},[93,653,654],{"class":152}," bold",[93,656,311],{"class":301},[93,658,641],{"class":110},[93,660,644],{"class":152},[93,662,663],{"class":110},"[1m'\n",[93,665,666,668,671,673,675,677],{"class":95,"line":120},[93,667,633],{"class":301},[93,669,670],{"class":152}," reset",[93,672,311],{"class":301},[93,674,641],{"class":110},[93,676,644],{"class":152},[93,678,679],{"class":110},"[0m'\n",[93,681,682],{"class":95,"line":133},[93,683,137],{"emptyLinePlaceholder":136},[93,685,686,689,692,694,697,700,703,706,708,711,713,716,719],{"class":95,"line":140},[93,687,688],{"class":453},"console.",[93,690,691],{"class":106},"log",[93,693,454],{"class":453},[93,695,696],{"class":110},"`${",[93,698,699],{"class":453},"bold",[93,701,702],{"class":110},"}${",[93,704,705],{"class":453},"cyan",[93,707,702],{"class":110},[93,709,710],{"class":152},"BANNER",[93,712,702],{"class":110},[93,714,715],{"class":453},"reset",[93,717,718],{"class":110},"}`",[93,720,600],{"class":453},[10,722,723,724,726],{},"Always pair colors with the ",[14,725,715],{}," code to avoid bleeding color into subsequent output.",[27,728,730],{"id":729},"conventions-from-popular-cli-tools","Conventions From Popular CLI Tools",[175,732,733,746],{},[178,734,735],{},[181,736,737,740,743],{},[184,738,739],{},"Tool",[184,741,742],{},"Banner Style",[184,744,745],{},"Key Pattern",[194,747,748,761,774,787,800],{},[181,749,750,755,758],{},[199,751,752],{},[41,753,754],{},"Nuxt",[199,756,757],{},"ASCII art + version",[199,759,760],{},"Right-aligned version number",[181,762,763,768,771],{},[199,764,765],{},[41,766,767],{},"Next.js",[199,769,770],{},"Minimal ASCII",[199,772,773],{},"▲ triangle symbol as brand mark",[181,775,776,781,784],{},[199,777,778],{},[41,779,780],{},"Vite",[199,782,783],{},"Colored ASCII",[199,785,786],{},"Gradient color scheme",[181,788,789,794,797],{},[199,790,791],{},[41,792,793],{},"Neofetch",[199,795,796],{},"ASCII distro logo",[199,798,799],{},"Logo on left, system info on right",[181,801,802,807,810],{},[199,803,804],{},[41,805,806],{},"Deno",[199,808,809],{},"Spiky ASCII",[199,811,812],{},"Single-color, compact",[10,814,815],{},"Common patterns:",[35,817,818,821,824,831],{},[38,819,820],{},"Version numbers aligned to the right side of the banner",[38,822,823],{},"Single bold color rather than rainbow effects",[38,825,826,827,830],{},"Banner appears only on interactive start, not in piped output (",[14,828,829],{},"isatty"," check)",[38,832,833],{},"Help commands include a smaller version of the banner",[84,835,837],{"className":287,"code":836,"language":289,"meta":89,"style":89},"\u002F\u002F Only show banner in interactive terminals\nif (process.stdout.isTTY) {\n  console.log(BANNER)\n}\n",[14,838,839,844,852,865],{"__ignoreMap":89},[93,840,841],{"class":95,"line":96},[93,842,843],{"class":99},"\u002F\u002F Only show banner in interactive terminals\n",[93,845,846,849],{"class":95,"line":103},[93,847,848],{"class":301},"if",[93,850,851],{"class":453}," (process.stdout.isTTY) {\n",[93,853,854,857,859,861,863],{"class":95,"line":120},[93,855,856],{"class":453},"  console.",[93,858,691],{"class":106},[93,860,454],{"class":453},[93,862,710],{"class":152},[93,864,600],{"class":453},[93,866,867],{"class":95,"line":133},[93,868,605],{"class":453},[27,870,872],{"id":871},"key-takeaways","Key Takeaways",[35,874,875,878,881,884,887,890],{},[38,876,877],{},"ASCII banners establish brand identity and session framing for CLI tools",[38,879,880],{},"FIGlet generates text banners in many styles — embed the result as a constant rather than depending on FIGlet at runtime",[38,882,883],{},"Design for 80-column terminals and center-align with padding",[38,885,886],{},"Use box-drawing characters for clean borders and ANSI codes for color",[38,888,889],{},"Only display banners in interactive terminals — skip them when output is piped",[38,891,892],{},"Popular tools pair compact ASCII art with a version number and a single accent color",[27,894,896],{"id":895},"related-guides","Related Guides",[35,898,899,906,912],{},[38,900,901],{},[902,903,905],"a",{"href":904},"\u002Fguides\u002Fascii-art-guide","ASCII Art Guide: Creating Text-Based Visuals",[38,907,908],{},[902,909,911],{"href":910},"\u002Fguides\u002Ffiglet-fonts-explained","FIGlet Fonts Explained: How ASCII Text Banners Work",[38,913,914],{},[902,915,917],{"href":916},"\u002Fguides\u002Fascii-art-terminal-prompts","ASCII Art in Terminal Prompts: Customizing Your Shell Experience",[27,919,921],{"id":920},"try-it-yourself","Try It Yourself",[10,923,924,925,929],{},"Generate ASCII banners for your CLI tools with our free ",[902,926,928],{"href":927},"\u002Ftools\u002Fascii-art","ASCII Art"," generator. Enter your tool name, preview it in dozens of FIGlet fonts, and copy the result directly into your source code.",[931,932,933],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":89,"searchDepth":103,"depth":103,"links":935},[936,937,938,939,940,941,942,943],{"id":29,"depth":103,"text":30},{"id":78,"depth":103,"text":79},{"id":280,"depth":103,"text":281},{"id":427,"depth":103,"text":428},{"id":729,"depth":103,"text":730},{"id":871,"depth":103,"text":872},{"id":895,"depth":103,"text":896},{"id":920,"depth":103,"text":921},"2026-05-28","Design ASCII banners for command-line tools — FIGlet fonts, layout techniques, and conventions for CLI splash screens and help output.","md",{"immutable":136},"\u002Fguides\u002Fascii-banners-cli-tools",{"title":5,"description":945},"guides\u002Fascii-banners-cli-tools","NX-ABGXPAILx8Tr5b3wmIadIBJPGTUjdf75K_5Fh9VQ",1780401331547]