A lightweight npm package for printing anime styled ASCII art to the browser console. Dual ESM/CJS build, React component and hook included, contributor-friendly art system.
Open any big site's browser console and you'll probably see something: a hiring message, a warning, or some ASCII art. It's a small detail that signals someone cared. I wanted that for my portfolio but didn't find a package that did it well, so I built one.
I found this was a great opportunity to publish a new NPM package, as I haven’t done it since my bootcamp days.
console-chan prints randomized ASCII art (braille characters and kaomoji) to the browser console with styled colors. It ships with 16 art pieces and 10 taglines, picks a random combination each time, and stays out of your way. One function call and you're done.
Solo project from start to publish. Designed the API, set up the build pipeline, wrote all the art pieces, handled testing, and published to npm. Also wrote the README and contributor guide to make it easy for others to add their own art.
The main challenge was making a single package work across Node.js and browsers with both ESM and CJS consumers. tsup handles the dual build, outputting separate entry points for the core library and the React subpath (console-chan/react). The React export provides a ConsoleArt component that fires once per session and a useConsoleArt hook for more control.
Console styling uses %c format strings, which behave differently between Node.js and browsers. The package detects the environment and adjusts output accordingly. In browsers you get colored, styled art. In Node.js you get plain text.
The art system is designed for contributors. Each art piece is a single file exporting a string. A barrel file collects them into an array, and the package picks randomly at runtime. The CONTRIBUTING.md walks first-time contributors through adding a piece, including a link to a braille text converter.
ConsoleArt component and useConsoleArt hookappend option for adding custom text (e.g. a site URL)