Feature Suggestion: Add Localization (i18n) Support to Keystatic CMS

[Jafar-Sabaouni]

Hi Keystatic team,

I’ve been experimenting with Keystatic CMS for a multi-language project, and while I love its simplicity and flexibility, I ran into significant challenges when trying to implement localization. I tried using Keystatic as-is for this purpose and explored a few workarounds (e.g., duplicating collections or tweaking file structures), but they were either sketchy or required too much manual effort. After investing a considerable amount of time, I realized that native support for internationalization (i18n) would make Keystatic far more powerful for users like me who need multi-language content.

Idea:

I’d like to suggest adding built-in localization support to Keystatic CMS. This could be implemented by:

• Introducing a localization option in the Keystatic config to define supported languages ( en, es, nl, fr).
• Adding a language toggle or field per collection or singleton, allowing content to be authored in multiple languages.
• Storing localized files in a structured way, such as content/blog/firstblog/en.mdoc, content/blog/firstblog/nl.mdoc, etc.,.

Benefits:

Streamlines multi-language content creation without forcing users to rely on sketchy workarounds.
Makes Keystatic more accessible for global projects.
Aligns with modern CMS expectations where localization is increasingly standard.

[Greenheart]

We used the following solution to add basic support for localised content. It won't be as convenient to work with when you have more than 2 locales, but it's good for simple projects.

export const locales = {
    en: 'English',
    sv: 'Svenska',
} as const

export type Locale = keyof typeof locales

/**
 * Extract the type of the first parameter for a given function
 */
type Parameter<T> = T extends (arg: infer T) => any ? T : never

/**
 * Support basic i18n by repeating a given Keystatic field for each locale.
 *
 * Use localised fields to reduce repetition in the config and make it easier to read.
 * This will also follow the global locales config, making sure all desired locales are automatically supported.
 *
 * @param field The Keystatic field
 * @param fieldConfig The config
 * @returns The localised fields
 */
function localised<F extends (arg: any) => any>(
    field: F,
    fieldConfig: Parameter<F>,
): ObjectField<Record<Locale, ReturnType<F>>> {
    return fields.object(
        Object.entries(locales).reduce(
            (result, [locale, localeLabel]) => {
                result[locale as Locale] = field({
                    ...fieldConfig,
                    label: `${fieldConfig.label} - ${localeLabel}`,
                })

                return result
            },
            {} as Record<Locale, ReturnType<F>>,
        ),
    )
}

Here's an example of how this can be used in the keystatic.config.ts to add a localised field description:

schema: {
    bio: localised(fields.text, {
        label: 'Description',
        multiline: true,
        validation: { isRequired: true },
    }),
}

This will show up as multiple input fields on the same entry page, making it easy to review and update all locales in the same view. Plus, this doesn't require any further changes to how Keystatic currently works.

[filipesmedeiros]

Still, for two languages, this seems awesome! Thank you :)

How would you then read data when building the pages with Astro? Do you have an example of that?