Skip to main content

Translating Page Content

Translazor can translate visible UI text in your Blazor pages by using the TranslatableText component.

Use this component for page headings, paragraphs, labels, buttons, messages, and other text rendered inside the page body.

Basic usage​

<TranslatableText Key="Home.Body" Text="Welcome to your new app." />

Example​

<h1>
    <TranslatableText Key="Home.Heading" Text="Welcome" />
</h1>

<p>
    <TranslatableText Key="Home.Intro"
                      Text="This page is translated by Translazor." />
</p>

<button class="btn btn-primary">
    <TranslatableText Key="Home.GetStartedButton" Text="Get started" />
</button>

Parameters​

ParameterDescription
KeyThe translation key used to identify this text.
TextThe fallback/source text displayed if the translation is missing or fails.

Key naming recommendation​

Use clear and consistent keys that describe where the text belongs.

<TranslatableText Key="Home.Title" Text="Home" />
<TranslatableText Key="Home.Description" Text="Welcome to our application." />
<TranslatableText Key="Home.GetStartedButton" Text="Get started" />

A good pattern is:

PageName.ElementName

For example:

Home.Title
Home.Intro
Home.GetStartedButton
Pricing.Title
Pricing.MonthlyPlan
Contact.SubmitButton

Translating multiple texts on the same page​

You can use TranslatableText multiple times on the same page.

@page "/"

<h1>
    <TranslatableText Key="Home.Title" Text="Hello, world!" />
</h1>

<p>
    <TranslatableText Key="Home.Body" Text="Welcome to your new app." />
</p>

<p>
    <TranslatableText Key="Home.FooterNote" Text="This text is translated automatically." />
</p>

When to use TranslatableText​

Use TranslatableText when you want to translate text that appears inside the visible page content.

Good use cases include:

  • Headings
  • Paragraphs
  • Labels
  • Buttons
  • Alerts
  • Validation messages
  • Static UI text

Example with layout content​

You can also use TranslatableText inside layouts, navigation menus, or shared components.

<nav>
    <a href="/">
        <TranslatableText Key="Navigation.Home" Text="Home" />
    </a>

    <a href="/pricing">
        <TranslatableText Key="Navigation.Pricing" Text="Pricing" />
    </a>

    <a href="/contact">
        <TranslatableText Key="Navigation.Contact" Text="Contact" />
    </a>
</nav>

Troubleshooting​

If the translated text does not appear, check the following:

  • Routes is wrapped with <BlazorTranslator ...>.
  • The selected language is supported in your Translazor configuration.
  • The translation key is unique and consistent.
  • The page is rendered interactively if your setup requires instant language switching.
  • If using LanguageInitMode.FromDropDownList, make sure <LanguageSelector /> is rendered in your layout or page.