Visual Editor

Visual Editor

Set enableSync: true in localessInit() to load the Visual Editor sync script (sync-v1.js). It's a no-op outside the Localess Visual Editor iframe.

With LocalessDocument

<LocalessDocument> wraps <LocalessComponent> and subscribes to input/change events automatically when enableSync is active, re-rendering with the updated content in place. It doesn't fetch content — pass the full Content object as document:

<!-- src/routes/[...slug]/+page.svelte — `data.content` comes from +page.server.ts -->
<script lang="ts">
  import { LocalessDocument } from '@localess/svelte';

  let { data } = $props();
</script>

<LocalessDocument document={data.content} />

Props:

Renders an inline error message if document.data is missing. Prefer LocalessDocument over LocalessComponent for the top-level content of a page when Visual Editor sync should apply; use LocalessComponent directly for nested blocks within an already-synced tree.

With the localessSync store

For custom integrations that manage their own content state instead of using LocalessDocument, subscribe to the Visual Editor bridge directly via the localessSync store — a Readable that emits the latest matching event:

<script lang="ts">
  import { localessSync } from '@localess/svelte';

  const latest = localessSync(['input', 'change']);
</script>

<p>{$latest?.data}</p>

No-ops (never emits) when enableSync was not set in localessInit, or outside the Visual Editor iframe. Unlike @localess/react, there's no exported isSyncEnabled/localessSyncOn helper — the localessSync store is the only public entry point into the sync bridge.

Available events: