Features

Deep Dive into the Localess Visual Editor

Explore how the Visual Editor enables real-time content previews and in-context editing for your team.

·
James Park· Senior Engineer
Explore how the Visual Editor enables real-time content previews and in-context editing for your team.

The Localess Visual Editor bridges the gap between developers and content editors. Instead of editing content in a traditional form interface, editors can make changes directly on the rendered page.

How it works

The Visual Editor loads your site inside an iframe and injects a thin sync layer via the @localess/react SDK. When an editor clicks on an element, the CMS sidebar highlights the corresponding field.

Setting up live sync

Enable enableSync: true in your localessInit call during development:

localessInit({
  enableSync: process.env.NODE_ENV !== 'production',
});

Events

Listen to input and change events to update your UI in real time without a full page reload.