Using a custom top bar with Topol Plugin

Hiding the built-in top bar lets you drive the editor from your own branded buttons, calling TopolPlugin methods and reacting through callbacks, so the editor blends into your app's UI.

Removing the default top bar

Hide the built-in top bar with a single option in TOPOL_OPTIONS:

removeTopBar: true,

Driving the editor from your own buttons

With the top bar gone, actions like save, undo, and preview are triggered by calling methods on the TopolPlugin object. To save, call:

window.TopolPlugin.save();

That runs the editor's save and fires your onSave callback with the current template data.

Setting up callbacks

Callbacks in TOPOL_OPTIONS let your app react when an action completes. onSave and onSaveAndClose share the same arguments: the template JSON first, then the rendered HTML, then the language mutations (an array of { lang, primary }) and the synced-sections usage.

const TopolOptions = {
  id: "#app",
  authorize: {
    apiKey: "YOUR_API_KEY",
    userId: "YOUR_USER_ID",
  },
  removeTopBar: true,

  callbacks: {
    onSave(json, html, mutations, syncedSections) {
      // Save json and html to your database
    },

    onSaveAndClose(json, html, mutations, syncedSections) {
      // Save the data, then close or redirect from the editor
    },

    onUndoChange(count) {
      // React to an undo, count is the number of undo steps
    },

    onRedoChange(count) {
      // React to a redo, count is the number of redo steps
    },
  },
};

With the top bar removed, save() is the method that runs onSave. There is no public method for save-and-close, but the built-in Ctrl/Cmd + Shift + S shortcut still runs onSaveAndClose.

The diagram below traces the save flow:

Methods you can call from a custom top bar

• Save: window.TopolPlugin.save()

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

• Undo: window.TopolPlugin.undo()

• Redo: window.TopolPlugin.redo()

• Toggle preview mode (desktop/mobile): window.TopolPlugin.togglePreview()

• Change preview size: window.TopolPlugin.togglePreviewSize()

Combining with mobile-first

The editor also supports a mobile-first editing experience, and the mobile and desktop views can be switched from your own buttons alongside a custom top bar. The mobile-first guide covers the methods for that.