---
title: "Mobile First"
description: "Create mobile email template directly in editor without the need of constantly switching to preview. Works even with custom Top Bar."
url: https://docs.topol.io/email-editor/guide/mobile-first.html
---

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

[![Mobile preview showcase video](https://i.ibb.co/sjdP675/mobile-first-video-preview.png)](https://www.youtube.com/watch?v=3fiFOGVy6Qw)

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

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

## Switching between views via API

If you're using a [custom top bar](https://docs.topol.io/email-editor/guide/top-bar.html) or custom interface instead of the default one, you can control the device preview using the Plugin's built-in methods:

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

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

```ts
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.