Editor Layout & UI Visibility

These options trim the editor's chrome to fit your product: panels can start collapsed, individual top-bar controls can be hidden, the top bar can go entirely, and a window bar with fullscreen, close, and rename controls can be added. All of them are optional and combine freely within the configuration.

hideSelectionPanel

The hideSelectionPanel option (boolean, default false) collapses the right-side selection panel, the panel that shows the properties of the currently selected element. The left panel with elements, layers, and settings is not affected by this option.

{
  hideSelectionPanel: true
}

With it set, the panel starts collapsed and the canvas takes the extra width. Users can reopen it with the arrow control on the panel edge (unless that control is removed via hideSelectionPanelExpand). The panel can also be toggled at runtime from your application:

LPE.toggleSelectionPanel();

hideSelectionPanelExpand

The hideSelectionPanelExpand option (boolean, default false) removes the collapse/expand arrow on the selection panel:

{
  hideSelectionPanelExpand: true
}

Without the arrow, users cannot collapse the selection panel or reopen it once collapsed; its visibility is fixed to whatever hideSelectionPanel says (though your application can still call LPE.toggleSelectionPanel()).

hideSettingsTab

The hideSettingsTab option (boolean, default false) removes the Settings tab from the editor interface, so users cannot access template-level settings from within the editor:

{
  hideSettingsTab: true
}

removeTopBar

The removeTopBar option (boolean, default false) removes the entire top bar for a minimal interface:

{
  removeTopBar: true
}

This removes built-in access to actions like save, preview, and undo/redo, so the host application is expected to provide replacements, for example custom buttons wired to instance methods like LPE.save() and LPE.togglePreview().

hideTopbarControls

The hideTopbarControls option (string[], optional) hides specific top-bar controls while keeping the rest visible:

{
  hideTopbarControls: ["undoRedo", "changePreview"]
}

The valid control identifiers:

• "undoRedo": undo and redo buttons (a single toggle; they cannot be hidden separately)
• "changePreview": preview enter/exit toggle
• "previewSize": device-size selector
• "save": Save button
• "saveAndClose": Save & Close button

Unrecognized identifiers are silently ignored, so double-check the spelling against this list. Passing [] hides nothing; use removeTopBar: true to remove the whole bar.

windowBar

The windowBar option (string[], optional) shows a window bar with the listed controls, commonly used in embedded integrations where window controls should match the host application's UI:

{
  windowBar: ["fullscreen", "close"]
}

The available controls are "fullscreen" (fullscreen toggle) and "close" (close button). When windowBar is not set, the window bar is hidden entirely, unless renameTemplate is true, which forces the bar to appear so the rename control has somewhere to live.

renameTemplate

The renameTemplate option (boolean, default false) shows a rename button next to the template title in the window bar. Renaming is delegated to your application: implement the onTemplateRename(name) callback to receive the new name, then call LPE.setTemplateName(newName) to update the displayed title.

Set the title option as well; when it is unset, the bar shows the editor's built-in default title instead of your template's name.

const LPE = LandingPageEditor({
  config: {
    ...TOPOL_OPTIONS,
    title: "Spring Campaign",
    renameTemplate: true,
  },
  onTemplateRename: ({ name }) => {
    // persist the name in your app, then reflect it in the editor
    LPE.setTemplateName(name);
  },
});

showUnsavedDialogBeforeExit

The showUnsavedDialogBeforeExit option (boolean, default true) warns users before exiting with unsaved changes:

{
  showUnsavedDialogBeforeExit: false
}

Disabling the dialog lets users exit without a prompt, which risks lost work. Only disable it when another save or autosave mechanism is in place.