Getting Started
Localization pattern for consuming apps.
Use AddSilliumCoreBlazor to register localization, leverage the built-in CultureService for in-place language switching, and pass translated strings through component parameters.
CultureService pattern
Call AddSilliumCoreBlazor in Program.cs to register localization, CultureService, and request localization middleware in one step. This keeps language switching in-place with no route prefix, cookie dependency, or full page reload.
Program + service + layout wiring
Minimal setup used in this demo.
Pattern summary
Scoped CultureService owns culture state, appbar picker updates it, layout subscribes and re-renders.
Show code
Copy code
// Program.cs
builder.Services.AddSilliumCoreBlazor(options =>
{
options.SupportedCultures = ["en", "de"];
options.DefaultCulture = "en";
});
// Dev-only: translation tools
if (builder.Environment.IsDevelopment())
builder.Services.AddSilliumDevTranslationTools();
var app = builder.Build();
app.UseSilliumRequestLocalization();
// MainLayout.razor
@inject ICultureService CultureService
protected override void OnInitialized() => CultureService.CultureChanged += OnCultureChanged;
private void OnCultureChanged() => _ = InvokeAsync(StateHasChanged);Wiring and Flow
This is the shortest path from language switch to rendered localized text in pages and components.
| Part | Location | Responsibility |
|---|---|---|
| DI registration | Program.cs | AddSilliumCoreBlazor registers localization, CultureService, and options. UseSilliumRequestLocalization configures the middleware. |
| CultureService | Sillium.Core.Components/Services/CultureService.cs | Stores current culture, persists it as a cookie, and notifies subscribers when language changes. |
| Main layout | Components/Layout/MainLayout.razor | Hosts language switch and triggers rerender for active page content. |
| Resource files | Resources/Components/Pages/*.resx | Per-component .resx files provide key-value translations for EN (fallback) and DE. |
| Component/Page consumer | *.razor / *.razor.cs | Injects IStringLocalizer<T> and resolves keys with L["key"] in Razor or code-behind. |
Usage Pattern
Inject once, consume keys in markup and C#, keep resource keys feature-scoped.
Where are strings stored?
Use per-component .resx files in the Resources/ folder (e.g. MyPage.resx for EN, MyPage.de.resx for DE).
Show code
Copy code
// Razor component — inject a typed localizer
@inject IStringLocalizer<MyPage> L
<Typo Scale="TypeScale.Body">@L[""HeroTitle""]</Typo>
<Button Text="@L[""SaveButton""]" />
// Code-behind / C#
[Inject] private IStringLocalizer<MyPage> L { get; set; } = default!;
var title = L[""HeroTitle""];
// Resource files (per component, in Resources/ folder)
// Resources/Components/Pages/MyPage.resx (EN — fallback)
// Resources/Components/Pages/MyPage.de.resx (DE)Shared library localization contract
Library components ship embedded .resx files with default translations. They expose string parameters that let consuming apps override specific labels. If no override is provided, the built-in localized default is used.
| Component | Localization parameters |
|---|---|
| DataTable | EmptyMessage, LoadingMessage, PreviousLabel, NextLabel, RowsLabel, ActionsHeaderLabel, ShowingLabel, OfLabel |
| TextInput | ClearLabel |
| TextArea | ClearLabel |
| NumberInput | ClearLabel, DecrementLabel, IncrementLabel |
| SelectInput | ClearLabel, ToggleLabel, Placeholder |
| ConfirmDialog | ConfirmText, CancelText |
| Autocomplete | Placeholder, NoResultsText |
| SearchInput | ClearLabel, NoResultsText, RecentLabel |
| PasswordInput | ClearLabel |
| EmailInput | ClearLabel, FormatErrorText |
Live side-by-side example
Same Form + TextInput block, rendered in English and German side by side by passing translated strings from the consuming app.
Consumer-side localized parameters
The consumer resolves translations and passes them into component parameters.
No library localization dependency
Shared components stay reusable while apps control translation sources and language policy.
Show code
Copy code
<TextInput
Label="@T[""form.fields.firstName""]"
Placeholder="@T[""form.placeholders.firstName""]"
ClearLabel="@T[""common.clear""]"
@bind-Value="Model.FirstName" />
<DataTable
PreviousLabel="@T[""common.previous""]"
NextLabel="@T[""common.next""]"
RowsLabel="@T[""common.rows""]" />Initial language scope
| Code | Language | Notes |
|---|---|---|
| en | English | Default fallback |
| de | Deutsch | First non-English language, aligned with project context |
Add `fr` or other languages only after this two-language infrastructure is validated.
Developer Translation Tool
The Translation DevTools panel is a built-in developer utility that tracks every localization key accessed at runtime. It provides live inspection, in-place editing, and changelog export for translation workflows.
Setup
Register the dev translation services in Program.cs and add the TranslationDevTools component to your layout. The DevStringLocalizer intercepts every localization call and records it in a live registry.
Registration and layout
Add these two pieces to enable the translation panel in development.
Development only
The Translation DevTools panel is intended for development. Changes are not persisted to resource files automatically — use the exported JSON/Markdown to update .resx entries manually.
Show code
Copy code
// Program.cs — only in development
if (builder.Environment.IsDevelopment())
{
builder.Services.AddSilliumDevTranslationTools();
}
// MainLayout.razor — add the floating panel
@if (Environment.IsDevelopment())
{
<TranslationDevTools />
}Features
Key Browser
Browse all translation keys grouped by resource type. Filter by key name or value. Expand any key to see values for all supported cultures.
Pick Mode
Click the "Pick" button, then click any text on the page. The panel jumps directly to the matching translation key and expands it for editing.
Occurrence Navigation
For each key, see how many times its value appears on the current page. Use the arrow buttons to jump between occurrences and highlight them in the DOM.
Inline Editing
Edit translation values directly in the panel. Expand the editor to a multi-line textarea for longer texts. All edits are tracked automatically.
Changelog
Every edit is recorded with timestamp, old value, and new value. The changelog persists in localStorage across page reloads.
Export
Copy all recorded changes as JSON (for automation) or Markdown (for review). Use the output to update .resx files or share with translators.
Development only
The Translation DevTools panel is intended for development. Changes are not persisted to resource files automatically — use the exported JSON/Markdown to update .resx entries manually.
Online Translation View (Mock)
Mockup for a future translator workspace with status and side-by-side EN/DE editing.
| Key | EN | DE | Status |
|---|---|---|---|
| themeEditor.title | Theme Editor | Theme Editor | Done |
| themeEditor.generator.generateBoth | Generate | Generieren | Done |
| localization.heroTitle | Localization in Shared Components | Lokalisierung in Shared Components | In review |
| common.save | Save | Speichern | Todo |
Demo-only preview
No API persistence yet. This section visualizes how an online translation editor could look.
Future API Integration Sketch
Minimal flow for loading, editing, reviewing, and exporting translation entries.
Future API Integration Sketch
Minimal flow for loading, editing, reviewing, and exporting translation entries.
Show code
Copy code
// Future direction (mock in this page):
// 1) Load resource entries from API
// 2) Edit EN/DE values side by side
// 3) Mark status: done / review / todo
// 4) Save and export resx/json