Creating Multi-Language UIs with Replay AI and Internationalization (i18n)

TL;DR: Replay allows developers to rapidly prototype multi-language UIs by automatically generating code from video recordings of existing applications, which can then be easily internationalized using standard i18n libraries.

Creating Multi-Language UIs with Replay AI and Internationalization (i18n)#

Building a user interface that caters to a global audience is no longer a luxury, it's a necessity. Manually coding and maintaining multiple language versions of your UI is time-consuming and error-prone. What if you could rapidly prototype a UI based on existing examples and then easily adapt it for different languages? Replay makes this possible.

Replay leverages the power of Gemini to reconstruct working UI code from video recordings. This Behavior-Driven Reconstruction allows you to capture the nuances of an application's behavior directly from a video demo, generating a functional codebase that you can then easily internationalize (i18n).

The Challenge: Traditional UI Development vs. Multi-Language Support#

Traditional UI development involves manually coding each component, styling it, and then implementing the logic. When you need to support multiple languages, this process is multiplied. You have to duplicate components, manage language-specific text, and ensure consistent styling across all versions. This is where Replay shines.

Consider these differences:

Replay: Bridging the Gap Between Video and Multi-Language UIs#

Replay takes a radically different approach. Instead of starting from scratch, you start with a video recording of an existing UI. Replay analyzes the video, understands the user behavior, and generates a functional codebase. This codebase can then be easily integrated with i18n libraries to support multiple languages.

Here's how Replay's features contribute to creating multi-language UIs:

• •Multi-Page Generation: Replay can generate code for multi-page applications, allowing you to capture complex user flows in a single video. This is crucial for creating comprehensive multi-language versions.
• •Supabase Integration: Replay can integrate with Supabase, a popular open-source Firebase alternative. This allows you to store and manage your translated text in a database, making it easy to update and maintain.
• •Style Injection: Replay preserves the visual style of the original UI, ensuring a consistent look and feel across all language versions.
• •Product Flow Maps: Replay provides a visual representation of the user flow, making it easier to understand the application's structure and identify areas that need to be localized.

Step-by-Step Guide: Building a Multi-Language UI with Replay and i18n#

Let's walk through the process of creating a multi-language UI using Replay and a popular i18n library like

.

Step 1: Capture the UI with Replay#

First, record a video of the UI you want to replicate. This could be a demo of an existing application, a prototype, or even a hand-drawn mockup. The clearer the video, the better the results.

💡 Pro Tip: Ensure the video is well-lit and the UI elements are clearly visible. Speak clearly and narrate the user flow to help Replay understand the behavior.

Step 2: Generate the Codebase#

Upload the video to Replay. Replay will analyze the video and generate a functional codebase, typically in React or Vue.js.

Step 3: Integrate i18next#

Install

and its React integration:

bash
npm install i18next react-i18next i18next-browser-languagedetector i18next-http-backend

Step 4: Configure i18next#

Create an

file to configure :

typescript
// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .use(LanguageDetector)
  .use(HttpApi)
  .init({
    fallbackLng: 'en',
    detection: {
      order: ['cookie', 'localStorage', 'htmlTag', 'path', 'subdomain'],
      caches: ['cookie'],
    },
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

This configuration tells

to:

• •Use the browser's language settings.
• •Load translation files from the
  text

  /locales
  directory.
• •Fallback to English if a translation is not available.

Step 5: Create Translation Files#

Create a

directory in your project and add translation files for each language you want to support. For example:

• •
  text

  /locales/en/translation.json
• •
  text

  /locales/fr/translation.json
• •
  text

  /locales/es/translation.json

Here's an example of an

file:

json
{
  "greeting": "Hello, world!",
  "welcome": "Welcome to our website."
}

And here's the corresponding

file:

json
{
  "greeting": "Bonjour, monde !",
  "welcome": "Bienvenue sur notre site web."
}

Step 6: Use Translations in Your Components#

Import the

hook from and use it to access translations in your components:

typescript
import React from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('greeting')}</h1>
      <p>{t('welcome')}</p>
    </div>
  );
}

export default MyComponent;

Step 7: Integrate Language Switching#

Add a language switcher to your UI to allow users to select their preferred language:

typescript
import React from 'react';
import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>Français</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
}

export default LanguageSwitcher;

The Power of Behavior-Driven Reconstruction#

Unlike screenshot-to-code tools that only capture the visual appearance of a UI, Replay understands the underlying behavior. This is crucial for creating multi-language UIs because it ensures that the translated UI functions correctly and provides a consistent user experience.

⚠️ Warning: While Replay generates functional code, it's essential to review and test the generated code thoroughly, especially when dealing with complex user interactions or data handling.

Real-World Example: E-commerce Product Page#

Imagine you want to create a multi-language version of an e-commerce product page. You can record a video of an existing product page, upload it to Replay, and generate the code. Then, you can use

to translate the product name, description, and other text elements.

Here's a simplified example of how you might use

to translate the product name:

typescript
// Product component
import React from 'react';
import { useTranslation } from 'react-i18next';

function Product({ name, description }) {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t(`product.${name}.name`)}</h2>
      <p>{t(`product.${name}.description`)}</p>
    </div>
  );
}

export default Product;

// Translation file (en/translation.json)
{
  "product": {
    "example_product": {
      "name": "Example Product",
      "description": "This is an example product."
    }
  }
}

// Translation file (fr/translation.json)
{
  "product": {
    "example_product": {
      "name": "Produit d'exemple",
      "description": "Ceci est un produit d'exemple."
    }
  }
}

This approach allows you to easily manage translations for multiple products and languages.

Benefits of Using Replay for Multi-Language UIs#

• •Faster Prototyping: Replay significantly reduces the time it takes to create UI prototypes, allowing you to focus on localization and refinement.
• •Consistent User Experience: Replay ensures that the translated UI maintains the same look and feel as the original, providing a consistent user experience across all languages.
• •Reduced Development Costs: Replay automates much of the UI development process, reducing the need for manual coding and lowering development costs.
• •Improved Code Quality: Replay generates clean, well-structured code, making it easier to maintain and extend.

📝 Note: Replay is not a replacement for skilled developers. It's a tool that empowers developers to be more productive and efficient. It handles the repetitive tasks of UI development, allowing developers to focus on the more complex aspects of building multi-language applications.

Frequently Asked Questions#

Is Replay free to use?#

Replay offers a free tier with limited functionality. Paid plans are available for more advanced features and higher usage limits. Check the Replay pricing page for the latest information.

How is Replay different from v0.dev?#

While both Replay and v0.dev aim to accelerate UI development, they take different approaches. v0.dev primarily relies on text prompts to generate UI code, whereas Replay analyzes video recordings to understand user behavior and reconstruct the UI. Replay's behavior-driven approach allows it to capture the nuances of an application's functionality more accurately.

What frameworks does Replay support?#

Replay currently supports React and Vue.js, with plans to add support for other popular frameworks in the future.

Can I use Replay to generate code for mobile apps?#

Replay can generate code for web-based mobile apps. Support for native mobile app development is planned for future releases.

How accurate is the code generated by Replay?#

The accuracy of the generated code depends on the quality of the video recording and the complexity of the UI. While Replay strives to generate functional code, it's essential to review and test the generated code thoroughly.

---

Ready to try behavior-driven code generation? Get started with Replay - transform any video into working code in seconds.