Visual Editor

Reload-based and SSR live-preview Visual Editor sync tiers for the Astro SDK for Localess.

Visual Editor sync

Two tiers, mutually exclusive:

enableSync: true — on any edit event, debounce (~500ms) and reload the page. Works under both static and server output. Simplest option; no extra setup.
livePreview: true — SSR-only in-place preview. Requires output: 'server'; the integration throws at config-setup time otherwise. save/publish/unpublish reload the page. input/change debounce (~500ms), POST the updated content back to the current page, and patch the returned HTML into the live DOM with morphdom — no full reload, keyed by each element's data-ll-id.

livePreview needs no extra wiring in your page beyond reading getLivePayload() before falling back to a normal fetch, so the page can render the in-flight edited data on the POST round-trip instead of re-fetching from the API:

---
// src/pages/[...path]/index.astro
import { getLivePayload, getLocalessClient, LocalessApiError, type Content } from '@localess/astro';
import LocalessDocument from '@localess/astro/LocalessDocument.astro';

const preview = await getLivePayload(Astro);
let content: Content;

if (preview.data) {
  content = { /* ...minimal Content shape... */ data: preview.data } as Content;
} else {
  try {
    content = await getLocalessClient().getContentBySlug(Astro.params.path ?? 'home');
  } catch (error) {
    if (error instanceof LocalessApiError && error.status === 404) {
      return Astro.rewrite('/404');
    }
    throw error;
  }
}
---

<LocalessDocument document={content} />

// astro.config.mjs — livePreview requires SSR
import node from '@astrojs/node';
import { defineConfig } from 'astro/config';
import { localess } from '@localess/astro';

export default defineConfig({
  output: 'server',
  adapter: node({ mode: 'standalone' }),
  integrations: [
    localess({
      origin: process.env.LOCALESS_ORIGIN,
      spaceId: process.env.LOCALESS_SPACE_ID,
      token: process.env.LOCALESS_TOKEN,
      livePreview: true,
    }),
  ],
});

Playgrounds: playgrounds/astro is a full SSR project using livePreview. playgrounds/astro-static mirrors it under static output using getStaticPaths and (optionally) enableSync instead.

Visual Editor sync

On this page