Visual Editor

Visual Editor Integration

The Localess Visual Editor enables live in-browser content editing. Set enableSync: true in provideLocaless() to automatically inject the sync script.

<ll-document> already wires up live sync automatically. To handle sync events yourself elsewhere, inject LocalessSyncService and use onChange() — it already covers the enabled() check (browser + Visual Editor iframe) and the ready() wait (avoiding a race where the listener is attached before the sync script has loaded):

import { Component, inject, OnInit, signal } from '@angular/core';
import { LocalessSyncService } from '@localess/angular';

@Component({
  selector: 'app-slug',
  standalone: true,
  templateUrl: './slug.component.html',
})
export class SlugComponent implements OnInit {
  private readonly sync = inject(LocalessSyncService);
  liveContent = signal<ContentData | undefined>(undefined);

  ngOnInit(): void {
    this.sync.onChange(event => this.liveContent.set(event.data));
  }
}

onChange(callback) is shorthand for on(['input', 'change'], callback): the input event fires on every keystroke, change fires when the editor saves, and callback is narrowed to that variant. Render liveContent() instead of the server-fetched data when it is set to give authors a live preview.

For other event types (save, publish, unpublish, pong, enterSchema, hoverSchema, leaveSchema), use on(event, callback):

this.sync.on(['save', 'publish'], event => console.info(`Content ${event.type}d`));

Both methods are no-ops if sync isn't enabled or usable in the current context — no need to check enabled() yourself.