Content Localization

When your collections have localized fields, the admin panel shows a locale switcher that lets editors work on each language independently.

How It Works

1. Mark fields as .localized() in your collection definition
2. Configure content locales in your runtime config
3. The admin shows a locale switcher in the form toolbar
4. Editors switch locales to edit each translation

Locale Switcher

The switcher appears automatically when localized fields exist. It shows:

• Country flag (auto-detected from locale code, or custom mapped)
• Locale code (e.g. "EN", "SK")
• Locale name (if configured)

Display Modes

The switcher adapts based on the number of locales:

Custom Flag Mapping

By default, flags are resolved from locale codes (e.g. en → US flag, sk → SK flag). Override with flagCountryCode:

export default runtimeConfig({
	localization: {
		defaultLocale: "en",
		locales: [
			{ code: "en", label: { en: "English" }, flagCountryCode: "gb" },
			{ code: "sk", label: { en: "Slovak" } },
			{ code: "cs", label: { en: "Czech" }, flagCountryCode: "cz" },
		],
	},
});

Localized Fields

Only fields marked with .localized() change when switching locales. Non-localized fields remain the same across all locales.

import { collection } from "#questpie/factories";

export const pages = collection("pages").fields(({ f }) => ({
	title: f.text().required().localized(), // Changes per locale
	slug: f.text().required(), // Same across locales
	content: f.blocks().localized(), // Changes per locale
	publishedAt: f.datetime(), // Same across locales
}));

Locale Scope

The admin tracks the current content locale separately from the UI locale. When an editor switches from "EN" to "SK":

• Only the localized field values change
• The admin UI language stays the same
• API calls include the locale parameter automatically

Related Pages

• Localization — Server-side localization setup
• Fields — Field types and .localized()
• Form Views — Form layout and toolbar