---
title: "Topol Options"
description: "Complete Reference of all Topol Options that can be found in Topol Landing Page Editor. Options are used to enable or disable certain functionality."
url: https://docs.topol.io/landing-page-editor/reference/topol-options.html
---

# Options configurable in Topol Options

Topol options are used to set features which Topol provides. Pass them under the `config` property when creating the editor; callbacks are passed as top-level properties next to `config` (see the [Callbacks Reference](#callbacks-reference) below).

> **Options are validated**
>
> The editor validates `config` against its options schema on initialization and on every `setOptions()` call. A value of the wrong type (for example `colors: "#000"` instead of `["#000"]`) makes the editor throw an `Invalid options provided` error that names the offending field, and the editor does not start (or the `setOptions()` call is rejected). Unknown keys are not an error - they are silently ignored.

## Options Reference

#### `authorize` — type: `object`, required

Required credentials to initialize the editor securely. [Learn more](https://docs.topol.io/landing-page-editor/guide/authorization.html)

#### `aiLabeledElements` — type: `boolean`, default: `false`

Adds an **AI content** text field to every section and block, stored on the element as `aiGenerateContent` for your own AI pipeline. [Learn more](https://docs.topol.io/landing-page-editor/guide/ai-features.html)

#### `api` — type: `IAPI`

Custom API endpoints for backend integration. [Learn more](https://docs.topol.io/landing-page-editor/guide/api.html)

#### `apiAuthorizationHeader` — type: `string | object`

Authorization header sent with requests to your custom API endpoints. [Learn more](https://docs.topol.io/landing-page-editor/guide/api.html#securing-api-endpoints)

#### `autosaveInterval` — type: `number`

Interval in seconds between autosave attempts. [Learn more](https://docs.topol.io/landing-page-editor/guide/autosave.html)

#### `colors` — type: `string[]`

Custom color palette for the color picker. [Learn more](https://docs.topol.io/landing-page-editor/guide/appearance.html)

#### `contentBlocks` — type: `object`

Controls which block types are available (disable or hide individual blocks). [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#contentblocks)

#### `currentUser` — type: `IOptionsUser`

Information about the current user for comments and collaboration. [Learn more](https://docs.topol.io/landing-page-editor/guide/user-management.html)

#### `customBlocks` — type: `array`

Custom block definitions with specific behavior or integrations. [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#customblocks)

#### `customFileManager` — type: `boolean`, default: `false`

Enables custom file manager mode for your own upload workflow. [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html#customfilemanager)

#### `customFonts` — type: `object`

Custom fonts available in the editor. [Learn more](https://docs.topol.io/landing-page-editor/guide/typography.html)

#### `defaultTemplateSettings` — type: `object`

Typography, colors, and element defaults applied to a newly created page. [Learn more](https://docs.topol.io/landing-page-editor/guide/appearance.html#defaulttemplatesettings)

#### `disableAiAssistant` — type: `boolean`, default: `false`

Disables the AI assistant feature. [Learn more](https://docs.topol.io/landing-page-editor/guide/ai-features.html)

#### `disableAlerts` — type: `boolean`, default: `false`

Disables editor alert notifications. [Learn more](https://docs.topol.io/landing-page-editor/guide/notifications.html)

#### `enableAutosaves` — type: `boolean`, default: `false`

Enables automatic saving at regular intervals. [Learn more](https://docs.topol.io/landing-page-editor/guide/autosave.html)

#### `enableComments` — type: `boolean`, default: `false`

Enables the commenting system for collaboration. [Learn more](https://docs.topol.io/landing-page-editor/guide/collaboration.html)

#### `enableFileManagerInGif` — type: `boolean`, default: `false`

Allows picking GIF images through the file manager. [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html)

#### `fileManagerPreferences` — type: `object`

UI preferences for the built-in file manager. [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html#filemanagerpreferences)

#### `fontSizes` — type: `number[]`

Available font sizes in the editor. [Learn more](https://docs.topol.io/landing-page-editor/guide/typography.html)

#### `hideSelectionPanel` — type: `boolean`, default: `false`

Collapses the right-side selection panel (properties of the selected element). [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html)

#### `hideSelectionPanelExpand` — type: `boolean`, default: `false`

Hides the expand control on the selection panel. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html)

#### `hideSettingsTab` — type: `boolean`, default: `false`

Hides the settings tab in the editor. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html)

#### `hideTopbarControls` — type: `string[]`

Hides specific controls from the top bar. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html)

#### `htmlMinified` — type: `boolean`, default: `false`

Outputs minified HTML on export. [Learn more](https://docs.topol.io/landing-page-editor/guide/template-export.html)

#### `imageCompressionOptions` — type: `object`

Configures automatic image compression settings (defaults in the callout below). [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html#imagecompressionoptions)

#### `imageEditorOptions` — type: `object`

Options for the built-in image editor, e.g. hiding specific controls. [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html#imageeditoroptions)

#### `imageMaxSize` — type: `number`, default: `2097152 (2 MB)`

Maximum allowed image upload size in bytes. [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html#imagemaxsize)

#### `language` — type: `string`, default: `"en"`

Editor UI language code (two-letter, from the supported list). [Learn more](https://docs.topol.io/landing-page-editor/guide/localization.html)

#### `light` — type: `boolean`, default: `false`

Enables light theme mode. [Learn more](https://docs.topol.io/landing-page-editor/guide/appearance.html)

#### `premadeBlocks` — type: `object | array | false`

Configuration for the premade design blocks library. Pass `false` to disable it entirely. [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#premadeblocks)

#### `premadeTemplates` — type: `boolean`, default: `false`

Enables the premade template library. [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#premadetemplates)

#### `premadeTemplatesOptions` — type: `object`

UI options for the premade template library (`hideSearch`; `showDelete` is accepted but has no effect). [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#premadetemplates)

#### `removeTopBar` — type: `boolean`, default: `false`

Removes the top bar completely. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html)

#### `renameTemplate` — type: `boolean`, default: `false`

Enables template renaming functionality. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html)

#### `role` — type: `string`

User role determining permissions (`manager`, `editor`, `reader`). [Learn more](https://docs.topol.io/landing-page-editor/guide/user-management.html)

#### `savedBlocks` — type: `boolean`, default: `false`

Enables the saved blocks library. [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#savedblocks)

#### `showUnsavedDialogBeforeExit` — type: `boolean`, default: `true`

Enabled by default. Set to `false` to suppress the browser confirmation dialog when leaving with unsaved changes. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html#showunsaveddialogbeforeexit)

#### `syncedSectionsEnabled` — type: `boolean`, default: `false`

Enables synced sections across multiple pages. [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#syncedsectionsenabled)

#### `teamUsers` — type: `IOptionsUser[]`

Team members available for @mentions in comments. [Learn more](https://docs.topol.io/landing-page-editor/guide/collaboration.html)

#### `templateId` — type: `string | number`

Template identifier used for comments and other API features. [Learn more](https://docs.topol.io/landing-page-editor/guide/collaboration.html)

#### `textOverride` — type: `object`

Custom text overrides for UI labels. Currently applied only when `language` is not set. [Learn more](https://docs.topol.io/landing-page-editor/guide/localization.html)

#### `theme` — type: `object`, default: `dark preset`

Custom theme configuration for editor appearance. [Learn more](https://docs.topol.io/landing-page-editor/guide/appearance.html)

#### `title` — type: `string`

Template title shown in the window bar. Only visible when `windowBar` or `renameTemplate` is set. [Learn more](https://docs.topol.io/landing-page-editor/guide/appearance.html#title)

#### `windowBar` — type: `string[]`

Controls displayed in the window bar. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html)

> **Defaults worth knowing**
>
> -   `imageCompressionOptions` defaults: `qualityJpeg: 0.95`, `qualityPng: 0.8`, `enableAutoResize: true`, `enableCompression: true`.
> -   When `theme` is not set, the editor uses the dark preset; `theme.preset: "light"` also switches the `light` option on, so the two interact.
> -   Supported `language` codes: `en`, `fr`, `pt`, `es`, `ja`, `zh`, `ru`, `tr`, `de`, `sv`, `nl`, `it`, `fi`, `ro`, `cs`, `pl`, `ko`, `vi`, `he`, `ar`. Regional variants such as `en-US` are not supported - an unsupported code fails options validation and the editor does not start.

## Callbacks Reference

Callbacks are passed as **top-level properties** when creating the editor, next to `config` - not inside the options object:

```js
const editor = LandingPageEditor({
  config: { authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" } },
  onSave({ json, html }) {
    /* ... */
  },
});
```

> **One payload object per callback**
>
> Every callback receives **at most one argument: an object with named properties** (`onSave({ json, html })`, `onUndoChange({ count })`, `onEditorError({ source, message, detail })`, ...). Callbacks that carry no data (`onInit`, `onLoaded`, `onPreviewClose`, ...) are called with no arguments. New fields can be added to a payload later without breaking your handlers, so destructure what you need and ignore the rest.

#### `onSave` — type: `({ json, html }) => void | Promise<void>`

Called when user saves the template. `json` is the template definition, `html` the rendered page as a string. **May return a Promise**: the editor keeps its saving state until it settles, and a rejection is shown as a save error - so an `async` handler that persists to your backend reports failures to the user for free. A Promise that never settles is released after 30 seconds with a console warning. [Learn more](https://docs.topol.io/landing-page-editor/guide/template-export.html#persisting-asynchronously)

#### `onSaveAndClose` — type: `({ json, html }) => void | Promise<void>`

Called when user saves and closes the editor. Same payload and Promise handling as `onSave`; a rejection keeps the editor open. Closing the editor UI is your job in this handler. When you do not define `onSaveAndClose`, the payload goes to `onSave` instead and the editor iframe is removed by the loader afterwards.

#### `onOpenFileManager` — type: `()`

Called when file manager should open. [Learn more](https://docs.topol.io/landing-page-editor/guide/file-management.html#customfilemanager)

#### `onImageDelete` — type: `({ items })`

Called when files or folders are deleted in the file manager, so you can clean up your own storage.

#### `onLoaded` — type: `()`

Called after a template passed to `load()` has been applied.

#### `onInit` — type: `()`

Called once the editor is fully initialized and ready.

#### `onUndoChange` — type: `({ count })`

Called when undo history changes. `count` is the number of undo steps available.

#### `onRedoChange` — type: `({ count })`

Called when redo history changes. `count` is the number of redo steps available.

#### `onPreview` — type: `({ html })`

Called when user triggers preview mode. `html` is the rendered page as a string.

#### `onPreviewClose` — type: `()`

Called when the preview is closed.

#### `onAlert` — type: `({ notification })`

Called when editor displays an alert. `notification` carries `type`, `text` and the other notification fields. [Learn more](https://docs.topol.io/landing-page-editor/guide/notifications.html)

#### `onEditorClose` — type: `() => void | Promise<void>`

Called when the user closes the editor from the window bar (the close button is enabled with `windowBar`). Closing the editor UI is your job in this handler; when you do not define it, the editor iframe is removed by the loader instead. May return a Promise. Named `onEditorClose` because the loader reserves `onClose` for its own lifecycle.

#### `onEdittedWithoutSaveChanged` — type: `({ value })`

Called when the unsaved-changes state flips. `value` is `true` while there are unsaved edits.

#### `onOpenCustomBlockDialog` — type: `({ block })`

Called when custom block dialog should open. `block` is the custom block data including its current content. [Learn more](https://docs.topol.io/landing-page-editor/guide/content-blocks.html#customblocks)

#### `onTemplateRename` — type: `({ name })`

Called when user clicks the rename button. `name` is the current template name. [Learn more](https://docs.topol.io/landing-page-editor/guide/layout.html#renametemplate)

#### `onEditorError` — type: `({ source, message, detail? })`

Called when an error occurs in the editor. `source` is `"authorize"`, `"network"` or `"templateLoad"`, `message` a human-readable description and `detail` the raw error data when available (for `network` errors, the response body). Named `onEditorError` because the loader reserves `onError` for its own lifecycle.

## TypeScript Interface

Options passed under `config`:

```ts
interface IPluginOptions {
  authorize: {
    apiKey: string;
    userId: string | number;
  };
  aiLabeledElements?: boolean;
  api?: IAPI;
  apiAuthorizationHeader?: Record<string, string> | string;
  autosaveInterval?: number;
  colors?: Array<string>;
  contentBlocks?: Partial<
    Record<
      | "text"
      | "image"
      | "gif"
      | "button"
      | "divider"
      | "spacer"
      | "social"
      | "video"
      | "form"
      | "html"
      | "raw"
      | "custom-raw",
      {
        disabled?: boolean;
        disabledText?: string;
        hidden?: boolean;
        disabledBadge?: string;
      }
    >
  >;
  currentUser?: IOptionsUser;
  customBlocks?: TopolCustomBlockData[];
  customFileManager?: boolean;
  customFonts?: {
    override?: boolean;
    fonts: Array<IFont>;
  };
  defaultTemplateSettings?: TopolTemplateSettings;
  disableAiAssistant?: boolean;
  disableAlerts?: boolean;
  enableAutosaves?: boolean;
  enableComments?: boolean;
  enableFileManagerInGif?: boolean;
  fileManagerPreferences?: {
    defaultTilesView?: boolean;
    hidePexelsIntegration?: boolean;
    maxUploadingFiles?: number; // positive integer
  };
  fontSizes?: Array<number>;
  hideSelectionPanel?: boolean;
  hideSelectionPanelExpand?: boolean;
  hideSettingsTab?: boolean;
  hideTopbarControls?: Array<string>;
  htmlMinified?: boolean;
  imageCompressionOptions?: {
    qualityJpeg?: number;
    qualityPng?: number;
    enableAutoResize?: boolean;
    enableCompression?: boolean;
  };
  imageEditorOptions?: {
    hideControls?: Array<string>;
  };
  imageMaxSize?: number;
  language?: ILanguage;
  light?: boolean;
  premadeBlocks?: IOptionsPremadeBlock;
  premadeTemplates?: boolean;
  premadeTemplatesOptions?: {
    hideSearch?: boolean;
    showDelete?: boolean;
  };
  removeTopBar?: boolean;
  renameTemplate?: boolean;
  role?: "manager" | "editor" | "reader";
  savedBlocks?: boolean;
  showUnsavedDialogBeforeExit?: boolean;
  syncedSectionsEnabled?: boolean;
  teamUsers?: IOptionsUser[];
  templateId?: number | string;
  textOverride?: Record<string, string>;
  theme?: ITheme;
  title?: string;
  windowBar?: Array<string>;
}

type ILanguage =
  | "en" | "fr" | "pt" | "es" | "ja" | "zh" | "ru" | "tr" | "de" | "sv"
  | "nl" | "it" | "fi" | "ro" | "cs" | "pl" | "ko" | "vi" | "he" | "ar";

interface IOptionsUser {
  userId: string; // must be a string here, unlike authorize.userId
  name: string;
  profilePhotoUrl: string;
}

interface IFont {
  label: string;
  style: string;
  url?: string;
}

// premadeBlocks accepts one of four shapes:
type IOptionsPremadeBlock =
  | { blocks: PremadeBlocks | LegacyPremadeBlocks; override: boolean }
  | Array<{ id?: number; name: string; blocks: PremadeBlock[] }>
  | { content?: unknown; ecomm?: unknown; footers?: unknown; headers?: unknown }
  | false; // disables premade blocks entirely
```

Callbacks are passed as top-level properties alongside `config`:

```ts
interface ISavePayload {
  json: object; // template definition
  html: string; // rendered page
}

interface IDeletedItem {
  name: string;
  type: "file" | "folder";
  path: string;
  url?: string;
  key: string | null;
}

interface ILandingPageEditorProps {
  config: IPluginOptions;
  onSave?(payload: ISavePayload): void | Promise<void>;
  onSaveAndClose?(payload: ISavePayload): void | Promise<void>;
  onOpenFileManager?(): void;
  onImageDelete?(payload: { items: IDeletedItem[] }): void;
  onLoaded?(): void;
  onInit?(): void;
  onUndoChange?(payload: { count: number }): void;
  onRedoChange?(payload: { count: number }): void;
  onPreview?(payload: { html: string }): void;
  onPreviewClose?(): void;
  onAlert?(payload: { notification: INotification }): void;
  onEditorClose?(): void | Promise<void>;
  onEdittedWithoutSaveChanged?(payload: { value: boolean }): void;
  onOpenCustomBlockDialog?(payload: { block: unknown }): void;
  onTemplateRename?(payload: { name: string }): void;
  onEditorError?(payload: {
    source: "authorize" | "network" | "templateLoad";
    message: string;
    detail?: unknown;
  }): void;
}
```

> **Common pitfall**
>
> Do not wrap callbacks in a `callbacks: { ... }` object inside `config` - the editor ignores that key entirely and no callback will ever fire. Always pass callbacks as top-level properties next to `config`.

> **INFO**
>
> `defaultTemplateSettings` nested fields are all optional and merge over the built-in defaults; invalid values are silently dropped rather than raising an error. [Learn more](https://docs.topol.io/landing-page-editor/guide/appearance.html#defaulttemplatesettings)