---
title: "Landing Page Editor Instance"
description: "Complete Reference of all callable functions on the Landing Page Editor instance."
url: https://docs.topol.io/landing-page-editor/reference/topol-plugin.html
---

# Landing Page Editor Instance

## Initialization

Load the editor script, then call the global `LandingPageEditor` factory. Options go under `config`; callbacks are top-level properties passed next to `config`.

```html
<script
  src="https://v1.page-assets.topol.io/loader/build.js"
  type="text/javascript"
></script>
```

The legacy `https://v1.page-assets.topol.io/topol-lpe.js` URL still serves the same file for existing integrations.

```js
const editor = LandingPageEditor({
  config: {
    authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
    // ... other options
  },
  onSave({ json, html }) {
    console.log("Saved:", json, html);
  },
  onInit() {
    console.log("Editor is ready");
  },
});

editor.render("#landing-page-editor");
```

## Methods Reference

#### `render` — type: `(selector: string) => void`

Renders the editor into the specified DOM element. [Learn more](https://docs.topol.io/landing-page-editor/guide/getting-started.html)

#### `load` — type: `(json: Record<string, unknown>) => void`

Loads a template JSON into the editor.

#### `save` — type: `() => void`

Renders the current template server-side, then triggers the `onSave({ json, html })` callback.

#### `togglePreview` — type: `() => void`

Toggles preview mode on or off.

#### `setPreviewSize` — type: `(index: number) => void`

Switches the preview device by numeric index (`0` = mobile, `1` = mobile landscape, `2` = tablet, `3` = desktop). Any other value selects desktop.

#### `undo` — type: `() => void`

Undoes the last change.

#### `redo` — type: `() => void`

Redoes the last undone change.

#### `chooseFile` — type: `(url: string) => void`

Returns the selected file URL to the editor (for custom file manager). [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html#customfilemanager)

#### `refreshSyncedSections` — type: `() => void`

Refreshes synced sections listing and reloads template with latest changes. [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#refresh-synced-sections)

#### `refreshComments` — type: `(key: string) => void`

Refreshes comments for a specific conversation. [Learn more](https://docs.topol.io/landing-page-editor/guide/collaboration.html#refreshcomments)

#### `openPremadeTemplatesSelection` — type: `() => void`

Opens the premade templates picker dialog.

#### `setTemplateName` — type: `(name: string) => void`

Sets the template name shown in the editor.

#### `updateOptions` — type: `(options: Partial<IPluginOptions>) => void`

Reconfigures a running editor. Accepts any editor options except `authorize`. [Learn more](https://docs.topol.io/landing-page-editor/reference/topol-options.html)

#### `toggleSelectionPanel` — type: `() => void`

Collapses or expands the right-side selection panel (properties of the selected element).

#### `updateApiAuthorizationHeader` — type: `(newAuthHeader: string | Record<string, string>) => void`

Updates the authorization header for all subsequent API calls. [Learn more](https://docs.topol.io/landing-page-editor/guide/api.html#updating-authorization-tokens-dynamically)

#### `createNotification` — type: `(notification: INotification) => void`

Displays a custom notification in the editor. [Learn more](https://docs.topol.io/landing-page-editor/guide/notifications.html)

#### `close` — type: `() => void`

Tears down the editor iframe completely. Comes from the underlying zoid iframe wrapper rather than the editor itself — there is no `destroy()` method on the instance.

## Example Usage

```js
// Load a template
editor.load(templateJson);

// Trigger save
editor.save();

// Update authorization header
editor.updateApiAuthorizationHeader("Bearer new_token");

// Refresh synced sections
editor.refreshSyncedSections();

// Reconfigure a running editor
editor.updateOptions({ hideSelectionPanel: true });

// Tear down the editor iframe
editor.close();
```

## TypeScript Interface

```ts
interface ILandingPageEditor {
  render: (selector: string) => void;
  load: (json: Record<string, unknown>) => void;
  save: () => void;
  togglePreview: () => void;
  setPreviewSize: (index: number) => void;
  undo: () => void;
  redo: () => void;
  chooseFile: (url: string) => void;
  refreshSyncedSections: () => void;
  refreshComments: (key: string) => void;
  openPremadeTemplatesSelection: () => void;
  setTemplateName: (name: string) => void;
  updateOptions: (options: Partial<IPluginOptions>) => void;
  toggleSelectionPanel: () => void;
  updateApiAuthorizationHeader: (
    newAuthHeader: string | Record<string, string>
  ) => void;
  createNotification: (notification: INotification) => void;
  /** Provided by the zoid iframe wrapper */
  close: () => void;
}
```