Preview Designs

This feature allows end-users to toggle between viewing their design in mobile, tablet or desktop mode, ensuring responsiveness and compatibility across different devices. It also allows end-users to view their emails in different email clients to ensure email client compatibility. This feature can be controlled programmatically, hidden, or customized to show dynamic content through custom HTML.

Enable or Disable

By default, the preview icon is visible in the actions bar, but you can choose to hide it using the unlayer.init() configuration.

Example:

unlayer.init({
  features: {
    preview: false  // Disable mobile/desktop preview icons
  }
});

Setting preview: false will hide the preview toggle icons in the editor’s actions bar.

Programmatically Controlling Preview Mode

You can also show or hide the preview mode programmatically, allowing developers to control when the preview is shown and which device mode (mobile or desktop) is active.

Show Desktop Preview

unlayer.showPreview("desktop");

This method open the preview in desktop mode, showing how the design will look on a desktop screen.

Show Mobile Preview

unlayer.showPreview("mobile");

This method open the preview in mobile mode, showing how the design will look on a mobile device.

Hide Preview

unlayer.hidePreview();

This method hides the preview mode, returning the user to the normal editing interface.

Customizing Preview with Custom HTML

In cases where you want to control what is displayed in preview mode, you can use custom HTML. This is especially useful if you’re using a templating library to render dynamic content in the preview mode.

To achieve this, you can register a callback function using the unlayer.registerCallback() method and pass your custom HTML to the preview mode.

unlayer.registerCallback('previewHtml', function (params, done) {
  // You can manipulate the params.html here or replace it with custom HTML
  done({
    html: params.html // you can pass your custom html here
  });
});

This allows you to fully control what the preview mode renders, whether it’s static content or dynamic content parsed through a templating engine.

Best Practices

• Device Compatibility: It’s recommended to keep the preview functionality enabled so users can switch between mobile and desktop views to ensure their design is responsive.
• Custom Previews for Dynamic Content: When rendering dynamic or personalized content, use the custom HTML feature to show how the final design will look in preview mode. This ensures the template renders accurately with real data.

By leveraging the preview feature, developers can provide end-users with a powerful tool to ensure that their designs are responsive across all devices, while maintaining the flexibility to customize and control how previews are displayed programmatically.