Sebastian Krüger
15776d7148
Massive UX improvements for preview customization and export: **PNG Export** - Export ASCII art as high-quality PNG images - Uses html-to-image library (2x pixel ratio) - Preserves background color and styling - Auto-download with font name in filename - Toast notification on success/error - PNG button in preview toolbar **Text Alignment Controls** - Left / Center / Right alignment buttons - Visual toggle buttons with icons - Live preview updates - Persists during font/text changes - Smooth transitions **Font Size Controls** - XS (10px) / SM (12-14px) / MD (14-16px) - Toggle buttons for quick switching - Responsive font sizes - Better readability options - Great for different screen sizes **Enhanced Preview Toolbar** - Reorganized button layout - Better button labels (Copy, Share, PNG, TXT) - Tooltips on all buttons - Icon + text labels - Wrapped flex layout for mobile **Preview Controls UI** - Two control groups (align + size) - Bordered button groups - Active state highlighting - Hover states - Clean, compact design **Updated Keyboard Shortcuts Help** - Better descriptions - Added "Tips" section - Feature discovery hints - Grouped by category - More helpful content **Technical Improvements** - Added html-to-image dependency - Ref-based element capture - Dynamic className composition - State management for controls - Proper TypeScript types **Button Improvements** - "Download" → "TXT" (more specific) - Added "PNG" button - Better icon usage - Consistent sizing - Mobile-friendly layout The preview is now fully customizable with professional export options! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Figlet UI
A modern, feature-rich web UI for generating ASCII art text using figlet.js with 373 fonts from the xero/figlet-fonts collection.
Features
- 373 Figlet Fonts - All .flf fonts from xero's curated collection
- Live Preview - Real-time rendering as you type
- Fuzzy Search - Quickly find fonts by name or style
- Visual Font Previews - See actual rendering in the selector
- Multiple Export Formats - Copy, download as text, PNG, or SVG
- Shareable URLs - Share your creations with encoded URLs
- Dark Mode - Eye-friendly interface
- Keyboard Shortcuts - Power user features
- Mobile Optimized - Works great on all devices
- Code Generation - Generate snippets for JS, Python, CLI
Tech Stack
- Next.js 16 - React framework with static export
- React 19 - Latest React with concurrent features
- TypeScript 5 - Type-safe development
- Tailwind CSS 4 - Modern utility-first CSS
- figlet.js - ASCII art rendering engine
- Fuse.js - Fuzzy search functionality
- Lucide React - Beautiful icon library
Development
Prerequisites
- Node.js 22+ (managed via nvm)
- pnpm (enabled via corepack)
Setup
# Install dependencies
pnpm install
# Run development server with Turbopack
pnpm dev
# Build for production (static export)
pnpm build
# Lint code
pnpm lint
The development server will be available at http://localhost:3000.
Docker Deployment
Build and run with Docker:
# Build Docker image
docker build -t figlet-ui .
# Run container
docker run -p 80:80 figlet-ui
The application will be available at http://localhost.
Project Structure
figlet-ui/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
├── lib/ # Utility functions and services
├── types/ # TypeScript type definitions
├── public/ # Static assets
├── Dockerfile # Multi-stage Docker build
├── nginx.conf # Nginx configuration for static serving
└── IMPLEMENTATION_PLAN.md # Detailed implementation roadmap
Why Figlet UI is Better Than TAAG
- More Fonts: 373 fonts vs ~300 on TAAG
- Modern UI/UX: Clean, responsive design with animations
- Better Search: Fuzzy search with visual previews
- More Export Options: PNG, SVG, code snippets, not just text
- Shareable Links: URL-encoded sharing
- Performance: Lazy loading, Web Workers for smooth experience
- Dark Mode: Built-in theme switching
- Keyboard Shortcuts: Power user efficiency
- Mobile First: Optimized for touch devices
License
MIT
Credits
- figlet.js by Patrick Gillespie
- xero/figlet-fonts - Curated font collection
- Original FIGlet project