Integration Guide

Babelize integrates directly into your codebase by scanning your files, extracting strings, and generating translation keys. There is no SDK to install and no complex provider to configure.

1. Run Babelize

Trigger the Babelize engine from your dashboard:

Click Run Babelize on your project.
The engine scans your code and replaces hardcoded strings with translation keys.
It generates locale files (e.g., en.json, es.json) in your project structure.

2. Global State Management

Since Babelize injects standard i18n keys, you can manage the language state using your preferred method (React Context, local state, or a lightweight library like next-intl or react-i18next).

3. Add a Language Switcher

You can easily create a custom button to switch languages. Here is a simple example using React and standard local storage to persist the choice.

Custom Button Component

components/language-toggle.tsx

"use client"

import { useState, useEffect } from 'react';

// Example configured languages
const LANGUAGES = [
  { code: 'en', name: 'English' },
  { code: 'es', name: 'Spanish' },
  { code: 'fr', name: 'French' }
];

export function LanguageToggle() {
  const [currentLang, setCurrentLang] = useState('en');

  useEffect(() => {
    // Load persisted language on mount
    const saved = localStorage.getItem('app-language');
    if (saved) setCurrentLang(saved);
  }, []);

  const handleSwitch = (langCode: string) => {
    setCurrentLang(langCode);
    localStorage.setItem('app-language', langCode);
    // Reload or trigger your i18n provider to update
    window.location.reload(); 
  };

  return (
    <div className="flex gap-2">
      {LANGUAGES.map((lang) => (
        <button
          key={lang.code}
          onClick={() => handleSwitch(lang.code)}
          className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
            currentLang === lang.code 
              ? 'bg-primary text-primary-foreground' 
              : 'bg-muted hover:bg-muted/80'
          }`}
        >
          {lang.name}
        </button>
      ))}
    </div>
  );
}

4. Translating Content

Your content is already translated! Babelize has replaced your strings with keys. Your application's i18n loader just needs to consume the generated JSON files.

// Babelize automatically converted this:
// <h1>Hello World</h1>
// To this (or similar, depending on your setup):
<h1>{t('hello_world')}</h1>

Integration & Site Widget