Ruby on Rails Translations with Human-Quality AI

Rails i18n Example: Demo of a Translatable Rails App

To show how Ruby on Rails internationalization (i18n) and translation works in practice, we built a small Rails demo application. The app displays the current server time with a refresh button and includes a simple language switcher. Each step below has a commit reference so you can follow along with the code changes.

First, in config/application.rb, tell Rails which languages the app should support and set a default locale.

config.i18n.default_locale = :en
I18n.available_locales = [:en, :es, :de]

config.i18n.default_locale = :en
I18n.available_locales = [:en, :es, :de]

Next, add the locale to the URL so each language has its own path, like /en/time or /es/time.

scope "/:locale" do
  get '/time', to: 'home#index', as: :time_display
end

scope "/:locale" do
  get '/time', to: 'home#index', as: :time_display
end

Finally, in app/controllers/application_controller.rb, make sure Rails loads the right locale from the URL and includes it in all links.

class ApplicationController < ActionController::Base
  around_action :switch_locale

  def switch_locale(&action)
    locale = params[:locale] || I18n.default_locale
    I18n.with_locale(locale, &action)
  end

  def default_url_options
    { locale: I18n.locale }
  end
end

class ApplicationController < ActionController::Base
  around_action :switch_locale

  def switch_locale(&action)
    locale = params[:locale] || I18n.default_locale
    I18n.with_locale(locale, &action)
  end

  def default_url_options
    { locale: I18n.locale }
  end
end

Now that the app supports multiple locales, give users a way to switch between them.

Rails already includes the current locale in all generated URLs (because of the default_url_options method in ApplicationController). That means you can create a simple UI that only updates the locale parameter while keeping the user on the same page.

In our demo app, the language switcher is added in app/views/layouts/application.html.erb and styled in app/assets/stylesheets/application.css.

<nav>
  <%= link_to "English",  url_for(locale: :en) %> |
  <%= link_to "Español",  url_for(locale: :es) %> |
  <%= link_to "Deutsch",  url_for(locale: :de) %>
</nav>

<nav>
  <%= link_to "English",  url_for(locale: :en) %> |
  <%= link_to "Español",  url_for(locale: :es) %> |
  <%= link_to "Deutsch",  url_for(locale: :de) %>
</nav>

Before you can translate your app, all user-facing text needs to live in Rails i18n files instead of being hard-coded. This means:

• Do the same for any visible JavaScript text (like alerts or tooltips)
• Replace text in views and controllers with translation keys
• Add those keys and their default-language values to config/locales/en.yml

Part A. Replace Text in Views and Controllers

Rails uses the built-in I18n.t (or simply t) helper to look up strings from your translation files.

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1><%= t(:hello) %></h1>
<p><%= t(:current_time, time: @time) %></p>
<button id="click-me"><%= t(:refresh) %></button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

<h1>Hello</h1>
<p>Current time: <%= @time %></p>
<button>Refresh</button>

Hard-coded text won’t appear in your YAML file, which means it can’t be translated later.

Add these keys in config/locales/en.yml:

en:
  hello: "Hello"
  current_time: "Current time: %{time}"
  refresh: "Refresh"

en:
  hello: "Hello"
  current_time: "Current time: %{time}"
  refresh: "Refresh"

Part B. Add JavaScript Strings to YAML

Rails doesn’t automatically pull text out of JavaScript files. If you have any strings shown to users in the browser, like alerts, tooltips, or confirmation messages, you’ll need to put them in your source-language YAML file as well.

For example, to translate a confirmation popup in JavaScript, add the string to config/locales/en.yml:

en:
  confirm: "Are you sure?"

en:
  confirm: "Are you sure?"

Later, this will be exported alongside your Ruby translations so both views and JavaScript use the same keys.

At this point, your en.yml file contains all the text that appears in your app. This file is the base version that PTC will use to create translations into other languages.

Now that all your app’s text is stored in config/locales/en.yml, you can sign into your PTC account and generate translations.

• PTC connected to our repository and automatically detected the English file
• It created translated versions like fr.yml and de.yml
• It opened a pull request with the new files in the same folder

Each translated file keeps the same keys and structure as the English version, so you can safely merge them into your project.

Your translated .yml files work automatically in Rails views. But JavaScript can’t read YAML — it needs JSON.

To make your translations available in JavaScript, use the i18n-js gem to convert YAML into a JSON file that the browser can read:

1. Add the gem i18n-js to your Gemfile and run bundle install.
2. After installation, run i18n init to generate the default configuration.
3. Update your configuration to set the file to public/locales.json. This prepares your app to store translations in a JSON file that JavaScript can access.

Now, run the i18n export command. This command reads your .yml files and writes the translated keys into public/locales.json.

With locales.json in place, you can load translations in your JavaScript code and display the correct text based on the active language.

Rails 7 includes Importmap, which makes it easy to manage JavaScript dependencies without bundlers.

1. Pin the libraries in config/importmap.rb:

pin "i18n-js", to: "https://esm.sh/i18n-js@latest/dist/import/index.js"
pin "load_locale", to: "load_locale.js"

pin "i18n-js", to: "https://esm.sh/i18n-js@latest/dist/import/index.js"
pin "load_locale", to: "load_locale.js"

2. Create a file in app/javascript/load_locale.js and add a loader script to fetch the JSON file:

export async function loadLocale() {
  const response = await fetch('/locales.json');
  const data = await response.json();
  return data;
}

export async function loadLocale() {
  const response = await fetch('/locales.json');
  const data = await response.json();
  return data;
}

Now your JavaScript can fetch the translations and display them just like Rails views.

At this point, Rails is exporting translations to locales.json and your JavaScript can load them. The last step is to make sure JavaScript uses the same locale as the Rails views.

1. Pass the current locale to the frontend by adding it to the <body> tag:

<!-- app/views/layouts/application.html.erb -->
<body data-locale="<%= I18n.locale %>">

<!-- app/views/layouts/application.html.erb -->
<body data-locale="<%= I18n.locale %>">

2. Import i18n-js and the loader function in your JavaScript:

import { I18n } from "i18n-js"
import { loadLocale } from "./load_locale"

import { I18n } from "i18n-js"
import { loadLocale } from "./load_locale"

3. When the page loads, fetch the translations and set the locale:

document.addEventListener('turbo:load', async () => {
  const translations = await loadLocale()
  const i18n = new I18n(translations)

  // use the current locale from the body tag
  i18n.locale = document.body.dataset['locale']

  // Example: confirmation dialog
  if (confirm(i18n.t('confirm'))) {
    // user clicked OK
  }
})

document.addEventListener('turbo:load', async () => {
  const translations = await loadLocale()
  const i18n = new I18n(translations)

  // use the current locale from the body tag
  i18n.locale = document.body.dataset['locale']

  // Example: confirmation dialog
  if (confirm(i18n.t('confirm'))) {
    // user clicked OK
  }
})

Now, your JavaScript will show messages in the selected language, just like your Rails views.

With this, the demo app is fully multilingual: Rails views and JavaScript both display the right language, and PTC keeps the translations up to date.