Skip to content

aduggleby/AsciiLogo

Repository files navigation

ASCII Style Lab

A Vite + React + TypeScript + Tailwind v4 web app that renders your text in a large set of ASCII art styles in real time.

Highlights

  • Live rendering as you type
  • 40+ style variants (FIGlet fonts + console-friendly derived variants)
  • Per-style copy button for quick terminal usage
  • Modern, minimal UI focused on readability
  • Runs fully client-side

Tech Stack

  • Vite
  • React 19
  • TypeScript
  • Tailwind CSS v4 (@tailwindcss/vite)
  • figlet.js

Getting Started

Prerequisites

  • Node.js 20+
  • npm 10+

Install

npm install

Run dev server

npm run dev

Open the printed local URL (usually http://localhost:5173).

Build

npm run build

Preview production build

npm run preview

Usage

  1. Enter text in the input box.
  2. Browse the style cards (including slanted, block, digital, isometric, and ANSI-inspired styles).
  3. Click Copy on any card to copy the exact ASCII output to your clipboard.

Notes

  • Some imported font sets increase bundle size because the app includes many FIGlet fonts for instant local rendering.
  • The app is designed for console-friendly output and supports additional derived modes like bold/shadow transformations.

Project Structure

src/
  App.tsx           # Main UI, input handling, copy actions
  asciiStyles.ts    # Font imports, style registry, render pipeline
  index.css         # Tailwind v4 import + custom visual theme

Credits

  • FIGlet font rendering by figlet
  • Built with Vite + React + TypeScript + Tailwind v4

License

MIT

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors