Visual Editor

Enable and subscribe to Localess Visual Editor live-editing events with the @localess/client TypeScript SDK.

Injects the Localess Visual Editor sync script into the document <head>. This enables live-editing capabilities when your site is opened inside the Localess Visual Editor. No-op when not running inside an iframe.

import { loadLocalessSync } from "@localess/client";

loadLocalessSync('https://my-localess.web.app');

`syncScriptUrl()`

Returns the URL of the Localess sync script, useful for manual script injection.

const scriptUrl = client.syncScriptUrl();

Marking Editable Content

Use these helpers to add Localess editable attributes to your HTML elements, enabling element selection and highlighting in the Visual Editor.

`localessEditable(content)`

Marks a content block as editable.

import { localessEditable } from "@localess/client";

// Returns: { 'data-ll-id': '...', 'data-ll-schema': '...' }
<section {...localessEditable(content.data)}>...</section>

`localessEditableField<T>(fieldName)`

Marks a specific field within a content block as editable, with type-safe field name inference.

import { localessEditableField } from "@localess/client";

// Returns: { 'data-ll-field': 'title' }
<h1 {...localessEditableField<MyPage>('title')}>...</h1>

Listening to Visual Editor Events

When your application is loaded inside the Localess Visual Editor, you can subscribe to editing events via window.localess.

if (window.localess) {
  // Subscribe to a single event
  window.localess.on('change', (event) => {
    if (event.type === 'change') {
      setPageData(event.data);
    }
  });

  // Subscribe to multiple events
  window.localess.on(['input', 'change'], (event) => {
    if (event.type === 'input' || event.type === 'change') {
      setPageData(event.data);
    }
  });
}

Available Event Types

Event	Payload	Description
`input`	`{ type: 'input', data: any }`	Fired while a field is being edited (real-time)
`change`	`{ type: 'change', data: any }`	Fired after a field value is confirmed
`save`	`{ type: 'save' }`	Fired when content is saved
`publish`	`{ type: 'publish' }`	Fired when content is published
`unpublish`	`{ type: 'unpublish' }`	Fired when content is unpublished
`pong`	`{ type: 'pong' }`	Heartbeat response from the editor
`enterSchema`	`{ type: 'enterSchema', id, schema, field? }`	Fired when entering a schema element
`hoverSchema`	`{ type: 'hoverSchema', id, schema, field? }`	Fired when hovering over a schema element
`leaveSchema`	`{ type: 'leaveSchema' }`	Fired when leaving a schema element

Visual Editor Integration

`loadLocalessSync(origin)`