Multi-Language Support
Treege includes a built-in translation system for multi-language content.
How It Works
Instead of a simple string, provide an object with language codes:
{
label: {
en: "What is your name?",
fr: "Quel est votre nom?",
es: "¿Cuál es tu nombre?"
}
}Basic Example
const multiLangFlow: Flow = {
nodes: [
{
id: "name",
type: "input",
data: {
label: {
en: "Full Name",
fr: "Nom complet",
es: "Nombre completo"
},
placeholder: {
en: "Enter your name",
fr: "Entrez votre nom",
es: "Ingrese su nombre"
},
type: "text",
required: true
}
}
],
edges: []
}Setting the Language
The renderer (and editor) select the active language via the language prop:
const [language, setLanguage] = useState<"en" | "fr" | "es">("en")
<TreegeRenderer
flow={multiLangFlow}
language={language}
onSubmit={handleSubmit}
/>Supported languages: English (en), French (fr), Spanish (es), German (de), Italian (it), Portuguese (pt), Arabic (ar).
Complete Example with Language Switcher
Next.js App Router: add "use client" at the top of the file (the form is interactive). Not needed in plain React setups.
import { useState } from "react"
import { TreegeRenderer } from "treege/renderer"
const languages = [
{ code: "en", label: "English" },
{ code: "fr", label: "Français" },
{ code: "es", label: "Español" }
]
export default function MultiLanguageForm() {
const [language, setLanguage] = useState("en")
return (
<div>
{/* Language Switcher */}
<div className="mb-6 flex gap-2">
{languages.map((lang) => (
<button
key={lang.code}
onClick={() => setLanguage(lang.code)}
className={language === lang.code ? "active" : ""}
>
{lang.label}
</button>
))}
</div>
{/* Form */}
<TreegeRenderer
flow={flow}
language={language}
onSubmit={handleSubmit}
/>
</div>
)
}Tip: Store the language preference in localStorage to persist it across sessions.