Top bar modification

The Top Bar is the editor's main control strip, and it can be trimmed down to selected buttons or removed entirely. It holds Save, Undo/Redo, the preview toggles, and more. For a fully branded or embedded experience, the whole bar can be replaced with your own interface.

Remove the Top Bar

To build your own interface, remove the entire default Top Bar:

removeTopBar: true, // to display, set to false or skip

Once removed, saving and closing are your application's responsibility, handled through our APIs.

Hide or show specific Top Bar elements

To keep the Top Bar but control which buttons appear, list them in the topBarOptions array. The default value is [].

topBarOptions: [
  "undoRedo", // shows Undo/Redo button
  "save", // shows Save button
  "saveAndClose", // shows Save & Close button
  "changePreview", // shows Change preview button
  "previewSize", // shows Toggle mobile/desktop preview button
  "previewTestMail", // shows Send test email button
  "changeLanguage", // shows Multilingual dropdown
  "translate" // shows Translate button (requires AI to be enabled)
],

If topBarOptions is not set or is an empty array [], all elements are shown.

Listing an element makes it eligible to appear, but some elements carry their own conditions on top of that. The Translate button needs AI enabled on your account and disableAiAssistant left unset, and it is hidden while Multilingual Templates is active, where the language dropdown takes over instead. Values outside the list above are ignored silently, so a typo shows up as a missing button rather than an error.

Additional Window Bar

Alongside the Top Bar sits an optional Window Bar, enabled by the windowBar array:

• fullscreen - Toggles fullscreen mode for distraction-free editing

• close - Closes the editor and triggers the onClose callback

windowBar: [
    "fullscreen", // Toggles fullscreen mode for distraction-free editing
    "close" // Closes the editor and triggers the onClose callback
],

The close action needs a matching callback:

callbacks: {
  onClose: () => {
    // Your custom logic for closing the editor
  }
}

onClose receives no arguments, and closing does not save first. Save the template from your own handler if the work should be kept.

INFO

Fullscreen relies on the browser's Fullscreen API. Where that API is unavailable, the button renders but does nothing.