---
title: "Topol Plugin"
description: "Complete Reference of all TopolPlugin functions that can be used in Topol email editor. Call these function to interact with the editor."
url: https://docs.topol.io/email-editor/reference/topol-plugin.html
---

# Callable functions on Topol Plugin

**The `TopolPlugin` global exposes methods for driving the editor from the host application**, covering everything from saving and undo/redo to language management and dark mode. Each method is called on the `window.TopolPlugin` global:

```js
window.TopolPlugin.save();
```

## Methods Reference

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

Switches the editing canvas back to desktop view. [Learn more](https://docs.topol.io/email-editor/guide/mobile-first.html#switching-between-views-via-api)

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

Switches the editing canvas to mobile view. [Learn more](https://docs.topol.io/email-editor/guide/mobile-first.html#switching-between-views-via-api)

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

Returns the selected file URL to the editor (for custom file manager). [Learn more](https://docs.topol.io/email-editor/guide/custom-filemanager.html#_2-return-the-selected-file)

#### `createLanguage` — type: `(lang: string) => void`

Creates a new language mutation for the given language code and fires `onLanguageCreated`. [Learn more](https://docs.topol.io/email-editor/guide/multilingual-templates.html#available-methods)

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

Displays a custom notification in the editor. Always shown, even with `disableAlerts` enabled. [Learn more](https://docs.topol.io/email-editor/guide/custom-notifications.html#triggering-a-custom-notification)

#### `deleteLanguage` — type: `(lang: string) => void`

Deletes a language mutation, after the editor shows a confirmation modal. [Learn more](https://docs.topol.io/email-editor/guide/multilingual-templates.html#available-methods)

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

Tears down the editor: removes the iframe and empties the container element it was mounted into.

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

Requests the current list of language mutations; the editor returns it through the `onGetMutations` callback without modifying any state. [Learn more](https://docs.topol.io/email-editor/guide/callbacks.html#ongetmutationsmutations)

#### `init` — type: `(topolOptions: ITopolOptions) => void`

Initializes the editor: creates the editor iframe inside the element from `options.id` and applies the passed options. [Learn more](https://docs.topol.io/email-editor/guide/getting-started.html)

#### `load` — type: `(json: JSON) => void`

Loads a template into the editor; accepts a JSON string or a parsed object. [Learn more](https://docs.topol.io/email-editor/guide/how-to-load-and-save-template.html#loading-a-template)

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

Opens the premade templates picker dialog. [Learn more](https://docs.topol.io/email-editor/guide/premade-templates-in-editor.html)

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

Redoes the last undone change and fires `onRedoChange`. [Learn more](https://docs.topol.io/email-editor/guide/how-to-use-custom-topbar.html#methods-you-can-call-from-a-custom-top-bar)

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

Refreshes the comment list; if `key` matches an open conversation, its detail refreshes too. Pass `""` to refresh only the list. [Learn more](https://docs.topol.io/email-editor/guide/comments.html#refreshcomments)

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

Refreshes synced sections listing and reloads placed sections with the latest changes. [Learn more](https://docs.topol.io/email-editor/guide/saved-blocks.html#refresh-synced-sections)

#### `save` — type: `(options?: { lang?: string }) => void`

Renders the current template server-side, then triggers the `onSave(json, html, mutations, syncedSections)` callback. The optional `lang` selects which language mutation's HTML is returned. [Learn more](https://docs.topol.io/email-editor/guide/how-to-load-and-save-template.html)

#### `selectLanguage` — type: `(lang: string) => void`

Switches the active editing language and fires `onLanguageSelected`. [Learn more](https://docs.topol.io/email-editor/guide/multilingual-templates.html#available-methods)

#### `setActiveMembers` — type: `(activeMembers: string[]) => void`

Replaces the presence list shown in the top bar — a display indicator, not co-editing. [Learn more](https://docs.topol.io/email-editor/guide/active-members.html#how-to-set-active-members)

#### `setMergeTags` — type: `(mergeTags: Array<unknown>) => void`

Replaces the entire merge tag list at runtime. Call it after `onInit` fires — earlier calls are dropped. [Learn more](https://docs.topol.io/email-editor/guide/merge-tags.html#update-merge-tags)

#### `setPreviewHTML` — type: `(html: string | null) => void`

Overrides the HTML shown in the preview pane — used with the `onPreview` callback to preview server-rendered output. Pass `null` to clear the override.

#### `setPrimaryLanguage` — type: `(lang: string) => void`

Makes the given language the primary mutation, creating it first if it does not exist yet. [Learn more](https://docs.topol.io/email-editor/guide/multilingual-templates.html#available-methods)

#### `setSavedBlocks` — type: `(savedBlocks: ISavedBlock[]) => void`

Replaces the saved blocks list — call it after your application handles a block save, edit, or delete. [Learn more](https://docs.topol.io/email-editor/guide/saved-blocks.html#advanced-configuration)

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

Sets the template name shown in the editor. Does not re-fire `onTemplateRename`, so it is safe to call from that callback. [Learn more](https://docs.topol.io/email-editor/guide/rename-template.html)

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

Opens or closes the autosave history panel. [Learn more](https://docs.topol.io/email-editor/guide/autosaves.html)

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

Blurs or unblurs elements hidden by mobile-first visibility settings in the current view. [Learn more](https://docs.topol.io/email-editor/guide/mobile-first.html#toggle-visibility-of-hidden-elements)

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

Opens or closes the AI chat panel. [Learn more](https://docs.topol.io/email-editor/guide/chat-ai.html)

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

Opens or closes the comments sidebar. [Learn more](https://docs.topol.io/email-editor/guide/comments.html#togglecomments)

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

Shows or hides the right-side control panel. [Learn more](https://docs.topol.io/email-editor/guide/control-panel-settings.html#control-panel-visibility)

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

Toggles dark mode rendering of the preview — for host applications with their own theme switch. [Learn more](https://docs.topol.io/email-editor/guide/dark-mode-preview.html#toggling-from-your-host-app)

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

Enters or leaves preview mode; leaving fires `onPreviewClose`. [Learn more](https://docs.topol.io/email-editor/guide/how-to-use-custom-topbar.html#methods-you-can-call-from-a-custom-top-bar)

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

Toggles the preview viewport between mobile (375 px) and desktop width. [Learn more](https://docs.topol.io/email-editor/guide/how-to-use-custom-topbar.html#methods-you-can-call-from-a-custom-top-bar)

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

AI-translates every non-primary language from the primary in one pass, overwriting existing translations. [Learn more](https://docs.topol.io/email-editor/guide/template-translation.html#available-methods)

#### `translateLanguage` — type: `(lang: string, sourceLang?: string) => void`

AI-translates a single language mutation, sourcing from the primary language unless `sourceLang` is given. [Learn more](https://docs.topol.io/email-editor/guide/template-translation.html#available-methods)

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

Undoes the last change and fires `onUndoChange`. [Learn more](https://docs.topol.io/email-editor/guide/how-to-use-custom-topbar.html#methods-you-can-call-from-a-custom-top-bar)

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

Updates the authorization header for all subsequent API calls — for refreshed or expired tokens. [Learn more](https://docs.topol.io/email-editor/guide/security.html#updating-authorization-tokens-dynamically)

#### `updateCustomBlockContent` — type: `(content: string) => void`

Writes new HTML content into the currently selected custom block. [Learn more](https://docs.topol.io/email-editor/guide/custom-block.html#using-custom-html-with-a-custom-dialog)

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

Reconfigures a running editor with a partial options object. [Learn more](https://docs.topol.io/email-editor/reference/topol-options.html)

#### `updateTemplate` — type: `(json: JSON, options?: IUpdateTemplateOptions) => void`

Replaces the whole template in a running editor and fires `onTemplateUpdated`; pass `skipSnapshot: true` to skip the undo snapshot. [Learn more](https://docs.topol.io/email-editor/guide/update-template.html#basic-usage)

## Example Usage

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

// Trigger save
window.TopolPlugin.save();

// Save a specific language mutation
window.TopolPlugin.save({ lang: "en" });

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

// Reconfigure a running editor
window.TopolPlugin.updateOptions({ language: "de" });

// Tear down the editor
window.TopolPlugin.destroy();
```

## TypeScript Interface

```ts
export default interface ITopolPlugin {
  changeEmailToDesktop: () => void;
  changeEmailToMobile: () => void;
  chooseFile: (url: string) => void;
  createLanguage: (lang: string) => void;
  createNotification: (notification: INotification) => void;
  deleteLanguage: (lang: string) => void;
  destroy: () => void;
  getMutations: () => void;
  init: (topolOptions: ITopolOptions) => void;
  load: (json: JSON) => void;
  openPremadeTemplatesSelection: () => void;
  redo: () => void;
  refreshComments(key: string): void;
  refreshSyncedSections: () => void;
  save: (options?: { lang?: string }) => void;
  selectLanguage: (lang: string) => void;
  setActiveMembers: (activeMembers: string[]) => void;
  setMergeTags(mergeTags: Array<unknown>): void;
  setPreviewHTML: (html: string | null) => void;
  setPrimaryLanguage: (lang: string) => void;
  setSavedBlocks: (savedBlocks: ISavedBlock[]) => void;
  setTemplateName(newName: string): void;
  toggleAutosaves: () => void;
  toggleBlocksAndStructuresVisibility: () => void;
  toggleChatAI: () => void;
  toggleControlPanel: () => void;
  toggleComments: () => void;
  toggleDarkMode: () => void;
  togglePreview: () => void;
  togglePreviewSize: () => void;
  translateAllLanguages: () => void;
  translateLanguage: (lang: string, sourceLang?: string) => void;
  undo: () => void;
  updateApiAuthorizationHeader: (
    newAuthHeader: string | Record<string, string>
  ) => void;
  updateCustomBlockContent(content: string): void;
  updateOptions: (options: Partial<ITopolOptions>) => void;
  updateTemplate: (json: JSON, options?: IUpdateTemplateOptions) => void;
}

interface IUpdateTemplateOptions {
  skipSnapshot?: boolean;
}
```