Technical Specification: Free Online Text to URL Slug Converter Tool

Overview

A high-performance, single-file browser utility that converts raw text into clean, SEO-optimized URL slugs. Designed for developers, content creators, and SEO specialists.

Core Features

• Real-time Conversion: Instant updates as the user types.
• Multiple Casing Options: Kebab-case (standard URL), snake_case, camelCase, and PascalCase.
• Language Normalization: Automatically transliterate non-Latin characters to standard ASCII (e.g., 'é' becomes 'e').
• Character Stripping: Option to remove or replace special characters and non-alphanumeric symbols.
• Length Limitation: Configurable maximum slug length with automatic truncation.
• Batch Mode: Process multiple lines of text into individual slugs simultaneously.
• Clipboard Integration: Single-click copy functionality for individual or batch results.
• In-Memory History: Temporary session-based log of the last 10 generated slugs (resets on page refresh, no persistence).

UI Layout Design

• Header: Clean, minimalist title with a short description.
• Primary Input Section: Large, prominent textarea for input text. Auto-focus on load.
• Control Panel: A grid layout containing:
  • Casing toggles (Kebab, Snake, etc.).
  • 'Include numbers' checkbox.
  • 'Limit Length' input field.
• Output Section: A clearly distinguished box showing the generated slug. Includes a 'Copy to Clipboard' icon button.
• History Table: A simple, modern list display appearing below the output, showing a scrollable list of recent items from the current session.

Design & Aesthetic (Light-Mode Only)

• Color Palette:
  • Background: #FFFFFF (White).
  • Surface/Card: #F9FAFB (Cool Gray 50).
  • Primary Accent: #2563EB (Strong Blue for buttons/links).
  • Text: #1F2937 (Dark Gray/Black).
  • Borders: #E5E7EB (Light Gray).
• Animations: Subtle transition (0.2s ease) on buttons (hover shadow), input focus borders, and clipboard confirmation feedback (text change from 'Copy' to 'Copied!').

Implementation Directives

1. Single File Constraint: All CSS and JS must be embedded within the HTML file. No external dependencies except via CDNs.
2. No Storage: Under no circumstances use localStorage, sessionStorage, or cookies. Maintain state using in-memory variables only.
3. Sandboxed Compatibility:
   • Do not use alert() or confirm(). Use custom floating div elements for UI feedback (e.g., 'Copied to clipboard!').
   • Use target="_blank" for any external resources.
4. Performance: Utilize efficient event listeners (debounced input handlers) to ensure the UI remains responsive even with large input strings.
5. Responsive: Use CSS Flexbox/Grid to ensure the layout stacks vertically on mobile devices and aligns into columns on desktop views.