Generating i18n Keys from UI Text Automatically

Generating i18n Keys from UI Text

Manually inventing translation keys for every string in your application is tedious and inconsistent. Automated key generation from source text produces consistent, descriptive keys that follow your project's conventions.

How Key Generation Works

A key generator analyzes the input text and produces a structured key through several steps:

1. Normalization -- strip punctuation, convert to lowercase, split into words
2. Categorization -- detect whether the text is a button label, error message, navigation item, status indicator, or generic content
3. Prefix assignment -- prepend the appropriate category (buttons, errors, nav, etc.)
4. Convention formatting -- apply dot notation, snake_case, or camelCase rules

Example Transformations

Input Text	Dot Notation	snake_case
Submit Order	buttons.submit.order	buttons_submit_order
Email is required	errors.email.is.required	errors_email_is_required
Dashboard	nav.dashboard	nav_dashboard
Loading...	status.loading	status_loading
Welcome to DevToolbox	content.welcome.to.devtoolbox	content_welcome_to_devtoolbox

Categorization Heuristics

The generator uses keyword matching and text patterns:

• Buttons -- starts with action verbs (Submit, Cancel, Save, Delete, Edit, Create, Add, Remove)
• Errors -- starts with error-related words (Error, Invalid, Failed, Missing, Required)
• Labels -- matches common form field names (Name, Email, Password, Phone, Address)
• Navigation -- matches nav-related words (Home, About, Settings, Profile, Dashboard)
• Status -- matches state words (Active, Pending, Loading, Success, Warning)
• Content -- longer phrases that do not match other categories

Namespace Prefixing

When a namespace prefix is set (e.g., pages.checkout), all generated keys are scoped:

pages.checkout.buttons.place.order
pages.checkout.errors.payment.failed
pages.checkout.labels.card.number

Batch Generation

For extracting strings from an entire page or component, batch mode processes multiple strings at once:

Input (one per line):
Submit Order
Cancel
Email is required
Card Number
Payment Failed
Processing...

Output (JSON nested):
{
  "buttons": {
    "submit_order": "Submit Order",
    "cancel": "Cancel"
  },
  "errors": {
    "email_is_required": "Email is required",
    "payment_failed": "Payment Failed"
  },
  "labels": {
    "card_number": "Card Number"
  },
  "status": {
    "processing": "Processing..."
  }
}

Customization

Auto-generated keys are suggestions. Always review and adjust:

• Shorten overly long keys (content.welcome.to.our.amazing.platform to content.welcome_message)
• Merge duplicates when two inputs produce the same key
• Adjust categories when the heuristic misclassifies text