Mobile-first email template

The mobileFirstEnabled option turns on the editor's mobile-first tooling: a mobile and desktop canvas switch, plus per-device visibility controls on blocks and structures. It is off by default.

This is an editing aid. The generated HTML is the same either way, since responsive behavior comes from the template itself rather than from this option.

To enable mobile-first support, include the following option in your TOPOL_OPTIONS configuration:

mobileFirstEnabled: true; // to disable, set to false or skip

Switching between views via API

If you're using a custom top bar or custom interface instead of the default one, you can control the device preview using the Plugin's built-in methods:

TopolPlugin.changeEmailToMobile(); // display mobile preview

TopolPlugin.changeEmailToDesktop(); // display desktop preview

Toggle visibility of hidden elements

Blocks and structures can be hidden per device type, so a section can appear on desktop but not on mobile. Hidden elements are recorded on the block as a CSS class: hide_on_mobile or hide_on_desktop for blocks, and hide_section_on_mobile or hide_section_on_desktop for structures.

To toggle how hidden elements are displayed on the canvas, use:

TopolPlugin.toggleBlocksAndStructuresVisibility();

One state renders hidden elements at 25% opacity so they remain selectable, and the other removes them from the canvas entirely. The method flips between the two and takes no argument, so there is no way to set a specific state.

Track visibility changes

Switching device view can leave the canvas empty, when every block or every structure is hidden for the device being switched to. The editor reveals the hidden elements automatically in that case and reports it through a callback:

callbacks: {
  //other callbacks...

  onBlocksAndStructuresVisibilityChange(value: boolean) {
    // Fired when the editor auto-reveals hidden elements after a device switch
    // You can trigger your own UI updates here
  }
}

INFO

This callback fires only on a device switch, whether through the UI or through changeEmailToMobile() and changeEmailToDesktop(). Calling toggleBlocksAndStructuresVisibility() changes the canvas without firing it, so a custom top bar should track the toggle state on its own.