DEVELOPER TOOL

i18nExtractionTool

Quickly process HTML files to extract text content and generate standardized internationalization JSON resource files, streamlining multilingual website development.

Start ExtractingRestore HTMLLearn More
index.html
<div class="header">
  <h1>Welcome</h1>
  <p>Sample text</p>
  <button>Start</button>
</div>
en.json
{
  "header.title": "Welcome",
  "header.description": "Sample text",
  "header.button": "Start"
}
KEY FEATURES

Core Capabilities

Two powerful flows: extract copy from HTML into JSON, and restore original HTML from keyed templates using JSON

HTML Parsing

Powerful HTML parsing capabilities that accurately identify and extract text content from various tags while automatically filtering scripts and style code

Standard JSON Output

Automatically generates i18n-standard JSON resource files with key-value mappings and nested structures for direct integration

HTML Restore

Provide translation JSON and t(...) keyed HTML to rebuild original HTML and recover copy without altering your templates

SIMPLE PROCESS

Three Simple Steps

We've simplified the HTML internationalization process to complete the entire workflow in just minutes

1

Upload HTML Files

Select or drag and drop your HTML files for processing. Supports multiple files for batch processing.

2

Configure Extraction Options

Set extraction rules, prefixes, and exclusions to customize the output structure for specific requirements.

3

Export JSON Files

Generate and download JSON format internationalization resource files for immediate integration into your project.

Start ExtractingTry Restore
EXAMPLES

See It In Action

Experience how our tool transforms HTML content into structured internationalization resources

Input: HTML Filesource.html
<div class="header">
  <h1>Welcome to our service</h1>
  <p>This is a sample text to demonstrate i18n extraction.</p>
  <button title="Click to continue">Get Started</button>
</div>
Output: JSON Filetranslations.json
{
  "header.title": "Welcome to our service",
  "header.description": "This is a sample text to demonstrate i18n extraction.",
  "header.button.text": "Get Started",
  "header.button.title": "Click to continue"
}

Integration Example

After extraction, you can easily integrate the JSON files with popular i18n libraries:

// React + i18next (example)
import i18n from 'i18next'
import { useTranslation } from 'react-i18next'
import translations from './translations.json'

i18n.init({ resources: { en: { translation: translations } } })

function Header() {
  const { t } = useTranslation()
  return (
    <div className="header">
      <h1>{t('header.title')}</h1>
      <p>{t('header.description')}</p>
      <button title={t('header.button.title')}>{t('header.button.text')}</button>
    </div>
  )
}

Ready to Internationalize?

Start extracting internationalization resources from your HTML files today and streamline your multilingual development

Start Using Now