Print ASCII Art in the Browser Console – ASCII Printer

ASCII Printer is a lightweight JavaScript library that prints colorful ASCII art directly into the devtool console.

It packs a catalog of over 100 pieces organized into categories like animals, characters, things, and messages.

Each piece comes with its own predefined color, and you can override colors with any valid CSS color value.

Features:

• Select art by exact name, catalog ID, or a partial name search.
• Pick random art from the entire catalog or filter by category.
• Retrieve catalog metadata and art objects without printing.
• Override default colors with any CSS color value.
• Expose the full art catalog for programmatic access.
• Zero dependencies and a single global namespace.

Use Cases:

• Print a random animal ASCII art as a console greeting when a portfolio site loads.
• Add a hidden developer easter egg that types “hello world” in colored ASCII when a specific command runs.
• Use category-filtered random art to make staging environment logs visually stand out.
• Display a warning message ASCII with a red color override to emphasize important console alerts.

How To Use It

Installation

Copy build/ascii-printer.min.js into your project and load it before scripts that call the global API.

<script defer src="/assets/js/ascii-printer.min.js"></script>
<script defer src="/assets/js/site-console.js"></script>

Basic Usage

Call printByName() with an exact catalog name.

// site-console.js
AsciiPrinter.printByName("rocket");

The console prints the selected artwork with its catalog color.

More Examples

Print a developer welcome message

A hidden console greeting works well for product demos, portfolios, and developer-focused landing pages. Set credits to true when you want the console to show the listed ASCII artist after the artwork.

AsciiPrinter.printByName("welcome", {
  color: "MediumSpringGreen",
  credits: true
});

Find art from part of a name

A partial lookup helps when you know the subject but not the exact catalog entry. printBySearch() prints the first matching item, so use exact names for fixed production output.

AsciiPrinter.printBySearch("bird", {
  color: "DeepSkyBlue"
});

Rotate status art from a controlled list

A custom list keeps random output relevant to a page state or console message. Repeated names increase the chance that an item appears.

const deploymentMessages = [
  "loading",
  "production",
  "warning",
  "rocket"
];
AsciiPrinter.printRandomFrom(deploymentMessages, {
  credits: true
});

Inspect catalog entries before printing

List methods return lightweight metadata for category pickers and debug tools. Get methods return the full object, including the ASCII text, default color, height, and author.

const objects = AsciiPrinter.list("thing");
console.table(objects);
const selectedArt = AsciiPrinter.getByName("lightBulb");
console.log(selectedArt.art);
console.log(selectedArt.author);

API Methods

// Print one catalog item by numeric ID.
AsciiPrinter.printById(84);
// Print one catalog item by its exact name.
AsciiPrinter.printByName("pinkPanther");
// Print the first item whose name contains the search text.
AsciiPrinter.printBySearch("panther");
// Print a random item from the complete catalog.
AsciiPrinter.printRandom();
// Print a random item from one category.
AsciiPrinter.printRandom("animal");
// Print a random item from a custom name list.
AsciiPrinter.printRandomFrom(["heart", "key", "lightBulb"]);
// Return all available categories.
AsciiPrinter.listTypes();
// Return all catalog names.
AsciiPrinter.listNames();
// Return names from one category.
AsciiPrinter.listNames("character");
// Return metadata for all catalog entries.
AsciiPrinter.list();
// Return metadata from one category.
AsciiPrinter.list("message");
// Return a complete ASCII object by ID.
AsciiPrinter.getById(17);
// Return a complete ASCII object by exact name.
AsciiPrinter.getByName("frog");
// Read the current library version.
AsciiPrinter.version;
// Read the complete catalog array.
AsciiPrinter.catalog;

ASCII Art Catalog:

Use the exact name value with AsciiPrinter.printByName() or AsciiPrinter.getByName(). Use the numeric ID with AsciiPrinter.printById() or AsciiPrinter.getById().

Animals

Characters

Things

Messages

Alternatives:

• Beautiful Browser Console Output Using Tailwind CSS – twlog
• Add Custom Colors And Styles To Console Logs With Colorlog.js
• Create Stylized Console Logs – Logger.js

FAQs:

Q: Does ASCII Printer add anything to the visible webpage?
A: No. The library writes output to the browser console only. It does not create DOM elements or load a stylesheet.

Q: How do I find the correct ASCII art name?
A: Run AsciiPrinter.listNames() for all names or pass a category such as "animal" or "message". Use AsciiPrinter.list() when you also need numeric IDs and category metadata.

Q: What happens when I use an unknown name or ID?
A: Print methods show a console warning and stop. getById() and getByName() return null when no catalog entry matches.

Q: Can I use ASCII Printer on a production site?
A: Yes. The script adds no visible elements to the page and only writes to the console. It is lightweight enough for easter eggs or branding messages in production.

Q: The ASCII art looks broken or misaligned in my console. How can I fix it?
A: The library relies on a monospace font. Open your browser’s console settings and switch the font to a monospaced family such as Consolas, Courier New, or Monaco.