What is the Rosey CloudCannon Connector?

The Rosey CloudCannon Connector is an optional add-on for Rosey sites that enables inline translation editing in the Visual Editor. It is not required to use Rosey — your multilingual Site will build and run correctly without it. The Connector is for teams who want to edit translations visually within CloudCannon rather than editing locale JSON files in the Data Editor.

The Connector is built using CloudCannon's Visual Editor API.

When you load a Site with the Rosey CloudCannon Connector in the Visual Editor, you get:

• A locale switcher — a floating button that lets you switch between available locales directly in the Visual Editor preview
• Inline translation editing — clicking on any data-rosey-tagged element opens an inline editor connected to the corresponding locale JSON entry
• Stale translation highlighting — elements whose source text has changed since the translation was written are highlighted with amber borders, with a count badge and resolve panel to help you work through them

How the Connector works#

The Rosey CloudCannon Connector is a client-side JavaScript library that you load in your Site's layout.

When the Connector detects a webpage is open in the Visual Editor, it highlights all the data-rosey-tagged elements on the page, and adds a floating locale-switching tool in the bottom right of the Visual Editor, allowing you to easily change which version of a page you are seeing. Because the Connector uses the Visual Editor API, all these editing interfaces are only visible within the Visual Editor — not on your live Site.

To use the Rosey CloudCannon Connector, you must already have Rosey set up on your Site.

In the next step of this guide, we'll install and configure the Connector on your Site.