Building Multilingual Websites with Rosey

Building websites for international audiences doesn’t have to be complicated. Rosey makes multilingual site management seamless and intuitive.

How Rosey Works

Rosey automatically scans your built site and detects translatable content using data-rosey attributes. It then:

1. Generates a base.json file with all translatable strings
2. Creates translation YAML files for each configured locale
3. Builds separate versions of your site for each language

Adding Translation Tags

Simply add data-rosey attributes to any element that needs translation:

<h1 data-rosey={generateRoseyId("Welcome to our site")}>
  Welcome to our site
</h1>

The generateRoseyId helper creates unique, stable IDs based on the content, ensuring translations persist across updates.

Organizing Translations

Rosey supports namespaces to group common translations:

• Use data-rosey-ns="common" for header/footer content
• Use data-rosey-ns="rcc-markdown" for markdown content
• Page-specific content gets organized automatically

Editing Translations

In CloudCannon, you’ll find all your translations in the Translations collection. Each page gets its own translation file, making it easy to:

• See what content needs translation
• Track translation progress
• Update translations as content changes

The workflow is seamless: update your content, rebuild your site, and Rosey automatically generates the necessary translation files.