---
title: "Editor Layout & UI Visibility"
description: "Control which parts of the Landing Page Editor's chrome are visible, from single top-bar controls to the entire top bar."
url: https://docs.topol.io/landing-page-editor/guide/layout.html
---

# 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.

```typescript
{
  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:

```js
LPE.toggleSelectionPanel();
```

## `hideSelectionPanelExpand`

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

```typescript
{
  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:

```typescript
{
  hideSettingsTab: true
}
```

## `removeTopBar`

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

```typescript
{
  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:

```typescript
{
  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:

```typescript
{
  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`](https://docs.topol.io/landing-page-editor/guide/appearance.html#title) option as well; when it is unset, the bar shows the editor's built-in default title instead of your template's name.

```js
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:

```typescript
{
  showUnsavedDialogBeforeExit: false
}
```

Disabling the dialog lets users exit without a prompt, which risks lost work. Only disable it when another save or [autosave](https://docs.topol.io/landing-page-editor/guide/autosave.html) mechanism is in place.