Lab Expansion: 12 New Text Tools and UI Improvements

Background

After the planning article pointed out that text processing tools were thin on the ground, I listed 12 candidates to add. This time I implemented all of them.

I also took the opportunity to rethink the category system and revamp the listing page UI.

Tools Added

All 12 tools from the plan were implemented.

Priority	Tool	Description
High	JSON Formatter	Format, minify, and validate
High	Base64 Converter	Encode/decode text and images
Medium	YAML Formatter	Format, validate, and convert to/from JSON
Medium	Text Diff	Highlight differences between two texts
Medium	URL Encode/Decode	Supports encodeURI/encodeURIComponent
Medium	Timestamp Converter	Convert between Unix time and human-readable dates
Medium	HTML Entity Converter	Escape and unescape HTML entities
Low	UUID Generator	Generate random v4 UUIDs
Low	Hash Generator	MD5/SHA-1/SHA-256/SHA-512
Low	JWT Decoder	Display header, payload, and expiry
Low	.env Editor	Parse, detect duplicate keys, and format
Low	INI Editor	Parse, format, and convert to JSON

I built all of them including the “Low” priority ones because once I got started, I just wanted to finish the whole list.

Category System Reorganization

The old categories were function-based.

// Old categories (function-based)
type LabToolCategory =
  | 'image-convert'
  | 'image-transform'
  | 'image-edit'
  | 'image-effect'
  | 'viewer'
  | 'nlp'
  | 'utility';

With more text processing tools added, I switched to a “purpose-based” system that creates a symmetry between image and text tools.

// New categories (purpose-based)
type LabToolCategory =
  | 'image-converter'   // image conversion
  | 'image-editor'      // image editing
  | 'image-generator'   // image generation
  | 'image-viewer'      // image viewing
  | 'text-converter'    // text conversion
  | 'text-formatter'    // text formatting
  | 'text-generator'    // text generation
  | 'text-analyzer'     // text analysis
  | 'language'          // language processing
  | 'qr-code'           // QR codes
  | 'experimental'      // experiments
  | 'utility';          // utilities

Image and text tools now follow the same pattern (converter, editor/formatter, generator, viewer/analyzer), which also makes the filter UI cleaner.

Listing UI Improvements

The Problem with Card Layout

The old card layout looks nice but started causing issues as the tool count grew.

• Poor overview (few tools visible at once)
• Card padding wastes vertical space
• Descriptions sometimes get cut off awkwardly

Switch to Table Layout

With 43 tools now in the list, I switched to a table layout to prioritize scannability.

Before	After
Cards (with thumbnails)	Table (text only)
2–3 tools per row	1 tool per row
Thumbnail images shown	No thumbnails

Thumbnails are gone, but I don’t think anyone will miss them. If you do want to browse them, the hero image gallery page has them all.

Build Size Impact

Text processing tools were implemented almost entirely with browser-native APIs, so external library additions were minimal.

• js-yaml: for YAML parsing (~30 KB gzip)
• diff: for text diff (~3 KB gzip)
• js-md5: for MD5 hashing (~5 KB gzip)

SHA hashing was handled by the Web Crypto API, and UUID v4 used crypto.randomUUID(), so no additional libraries were needed for those.

---

Lab page: lilting.ch/lab