initLivePreview

Initialize Live Preview in Storyblok's Visual Editor.

Internally, the function initializes the Storyblok Bridge and allows you to listen and react to events triggered by the Visual Editor.

Signature

declare function initLivePreview(
	config?: InitLivePreviewConfig
): Promise<_storyblok_js0.StoryblokBridgeV2>;

Parameters

Name	Required	Type	Description
`config`	Optional	`InitLivePreviewConfig`	Configuration object.

Returns

Storyblok Bridge instance.

Referenced Types

StoryblokBridgeV2

Examples

Initializing Live Preview and listening to the events.

import { sdk } from '~/sdk.config.ts';

sdk.storyblok.utils.initLivePreview().then((storyblok) => {
  if (!storyblok) return;

  storyblok.on('input', (payload) => {
    // Handle input event
  });

  storyblok.on(['change', 'published'], (payload) => {
    // Handle change and published events
  });
});