Stop Copy-Pasting Into Google Translate: Automate React i18n in 5 Minutes

You're about to deploy. Marketing just added 47 new strings to the app.

You copy the first one into Google Translate. Paste the Spanish back into your JSON file. Then French. Then German.

Thirty minutes later, you're still copying and pasting, and you've only done half.

Your deployment window closes in an hour.

There has to be a better way.

Note: The shipi18n CLI is launching soon! In the meantime, you can use the Shipi18n web app to translate your JSON files instantly. Upload your en.json, select your target languages, and download the translated files—same workflow, browser-based.

---

The problem

Manual translation workflows are killing developer productivity.

Here's what the typical process looks like:

• Copy each string from your en.json file into Google Translate
• Manually paste translations back into es.json, fr.json, de.json
• Fix the formatting that got broken during copy-paste
• Debug placeholder variables like {username} that translators accidentally changed
• Repeat for every single deployment when new strings are added
• Waste 30-60 minutes per deploy on work a script should handle

The real kicker?

This manual process introduces errors about 15-20% of the time. A misplaced placeholder, a forgotten escape character, or a copy-paste mistake.

Suddenly your production app is showing undefined instead of user names.

---

The solution

Automation.

Instead of manually shuttling text between Google Translate and your codebase, use a CLI tool that handles the entire translation pipeline automatically.

The concept is simple: your source JSON goes in, translated JSON files come out, with all placeholders preserved and formatting intact.

No more human copy-paste errors. No more wasted time.

Quick example

Here's what automated translation looks like:

# Instead of spending 45 minutes copying and pasting...
shipi18n translate

# Done. All your JSON files are translated.

That's it. Your en.json is now translated into every target language you've configured, with zero manual intervention.

---

Step-by-step guide

Let's set up automated translation for a React app. This should take about 5 minutes.

Step 1: Install shipi18n CLI

npm install -g shipi18n-cli

Or if you prefer Yarn:

yarn global add shipi18n-cli

Step 2: Get your API key

Sign up at shipi18n.com and grab your API key from the dashboard.

The free plan includes 3 languages and 100 translation keys—perfect for side projects and small apps. No credit card required.

Set it as an environment variable:

export SHIPI18N_API_KEY=your_api_key_here

Or add it to your .env file:

# .env
SHIPI18N_API_KEY=your_api_key_here

Step 3: Initialize your project

Navigate to your React project and run:

shipi18n init

This creates a shipi18n.config.js file:

module.exports = {
  apiKey: process.env.SHIPI18N_API_KEY,
  source: {
    path: './src/locales/en.json',
    language: 'en'
  },
  targets: [
    { language: 'es', path: './src/locales/es.json' },
    { language: 'fr', path: './src/locales/fr.json' },
    { language: 'de', path: './src/locales/de.json' }
  ],
  preserve: {
    placeholders: true,  // Keeps {username} intact
    htmlTags: true,      // Preserves <strong>, <em>, etc.
    formatting: true     // Maintains \n, \t, etc.
  }
}

Customize the targets array with whatever languages you need. Shipi18n supports 100+ languages.

Step 4: Run your first translation

shipi18n translate

Watch as your translation files are generated automatically.

The CLI will:

1. Read your source en.json
2. Detect and lock all placeholder variables
3. Send text to translation API
4. Write translated JSON to your target files
5. Validate that placeholders weren't corrupted

You'll see output like this:

✓ Loaded source: en.json (127 keys)
✓ Translating to Spanish...
✓ Translating to French...
✓ Translating to German...
✓ Validated placeholders in all files
✓ Done! 3 files updated in 8 seconds

Step 5: Review and deploy

Check the generated files:

git diff src/locales/es.json

You'll see clean, properly formatted translations with all your placeholders preserved:

{
  "welcome": "Bienvenido, {username}!",
  "itemCount": "Tienes {count} artículos en tu carrito"
}

Notice how {username} and {count} stayed intact? That's automatic placeholder preservation at work.

Commit and deploy:

git add src/locales/
git commit -m "Add Spanish, French, German translations"
git push

---

Step 6: Automate with CI/CD (bonus)

Want translations to happen automatically when you update en.json?

Add this to your GitHub Actions workflow:

# .github/workflows/translate.yml
name: Auto Translate
on:
  push:
    paths:
      - 'src/locales/en.json'

jobs:
  translate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Install Shipi18n
        run: npm install -g shipi18n-cli

      - name: Translate
        env:
          SHIPI18N_API_KEY: ${{ secrets.SHIPI18N_API_KEY }}
        run: shipi18n translate

      - name: Commit translations
        run: |
          git config user.name "GitHub Actions"
          git config user.email "actions@github.com"
          git add src/locales/
          git commit -m "Auto-translate: update translation files"
          git push

Now every time someone updates the English translations, the other languages update automatically.

Zero manual work required.

---

Comparison table

Let's break down the time savings:

Time savings: If you deploy twice a week, that's 86 minutes per week, or 75 hours per year saved per developer.

At a $100K annual salary, that's roughly $3,600 in recovered productivity per developer per year.

---

Key takeaways

Here's what you should remember:

1. Manual translation workflows waste 30-60 minutes per deployment and introduce errors 15-20% of the time

2. CLI automation reduces translation time by 95% while virtually eliminating human error

3. Automatic placeholder preservation means no more {username} turning into {nombreDeUsuario}

4. One-line command fits seamlessly into any development workflow

5. CI/CD integration enables fully automated translation pipelines with zero manual intervention

---

Next steps

Ready to stop wasting time on manual translations?

• Start free with Shipi18n - 3 languages, 100 keys, no credit card
• Check out framework-specific integration guides
• Explore our GitHub examples

Need more languages or keys? Check out our pricing plans that scale with your app.

---

Stop copying. Start shipping.

Start Free →