Injoris Injoris

How to Build an ASCII Art Text Generator

Jun 12, 2026 • Svelte • Injoris Team
Table of contents

What this tool does

An ASCII art text generator turns plain text into a multi-line banner made of characters. It’s commonly used for:

  • CLI banners (scaffolding output, service startup logs)
  • README / documentation headers (inside fenced code blocks to preserve spacing)
  • Quick “text posters” you can generate and copy in a terminal-like format

Try it here: ASCII Art Text Generator

How to use the tool

Text

Type anything in the Text box. The output updates automatically as you type.

Font

Font selects a FIGlet font. Different fonts change the shape and height of characters, so the same input can look completely different.

Width

Width controls the maximum line width (in characters) used when FIGlet lays out the ASCII art. Smaller values wrap earlier; setting it to 0 effectively disables wrapping.

Copy / Clear

  • Copy copies the output to your clipboard
  • Clear resets the input

How the tool is implemented

ASCII rendering with figlet

figlet is a widely used FIGlet implementation:

  • Mature ecosystem with many fonts
  • Supports width-based layout behavior
  • Pure text input/output, perfect for browser generation + copy

The core call looks like this:

figlet.text(input, { font, width, whitespaceBreak: true }, (err, text) => {
  if (err) throw err;
  return text ?? '';
});

Font loading pitfall: CORS

Many implementations load .flf files from a CDN (like unpkg) and set:

figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' });

During local testing, the browser blocks the request:

blocked by CORS policy: No 'Access-Control-Allow-Origin' header

Because the tool runs in the browser, fetching .flf is a cross-origin request. If the CDN doesn’t send permissive CORS headers, font loading fails and rendering fails.

Fix: use figlet importable-fonts (same-origin, on-demand)

The figlet package includes importable-fonts/*.js (each font is a JS module whose default export is the font text). The final approach:

  1. Dynamically import('figlet')
  2. When a font is needed, dynamically import('figlet/importable-fonts/<Font>.js')
  3. Register it with parseFont(fontName, fontText, true)

Benefits:

  • No cross-origin fetch (fonts are served from the same origin as part of the build)
  • Fonts are loaded on demand (only when selected)

Privacy and security

The ASCII generation runs entirely in your browser:

  • Your input text is rendered locally using figlet
  • The output is just plain text (and can be copied)
  • Preferences (Font/Width) are stored locally in your browser via localStorage

The tool does not send your input text to any server API. The only network activity you may see is normal page loading (JS/CSS assets) and general site analytics if enabled by the site.

tools
sveltekit
svelte5
figlet