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.

---

Custom Device Resolutions

Paid Feature

This feature is only available in paid plans. Learn More

You can customize the available device resolutions options in the preview mode by defining custom resolutions with specific dimensions. This allows you to test your designs at exact viewport sizes that match your target devices or breakpoints.

Basic Device Resolutions Example

unlayer.init({
  features: {
    preview: {
      enabled: true,
      deviceResolutions: {
        showDefaultResolutions: true, // Show built-in device options
        customResolutions: {
          desktop: [
            { value: 1000, name: 'Medium Desktop' },
            { value: 1440, name: 'Large Desktop' },
          ],
          tablet: [
            { value: 500, name: 'Small Tablet' },
            { value: 768, name: 'iPad Portrait' },
          ],
          mobile: [
            { value: 300, name: 'Small Mobile' },
            { value: 375, name: 'iPhone X' },
          ],
        },
      },
    },
  },
});

Custom device resolutions can be organized into three categories:

Category	Description
desktop	Large screen devices (typically > 768px)
tablet	Medium screen devices (typically 768px - 480px)
mobile	Small screen devices (typically < 480px)

Each custom device resolution object supports the following properties:

Option	Description
value	The viewport width in pixels (number)
name	The display text shown in the device dropdown

Hide Default Resolutions

If you want to show only your custom device resolutions and hide the default ones:

unlayer.init({
  features: {
    preview: {
      enabled: true,
      deviceResolutions: {
        showDefaultResolutions: false, // Hide built-in device options
        customResolutions: {
          desktop: [
            { value: 1920, name: 'Full HD Desktop' },
            {
              value: 1366,
              name: 'Standard Desktop',
            },
          ],
          tablet: [
            { value: 1024, name: 'iPad Pro 11"' },
            { value: 912, name: 'Surface Pro' },
          ],
          mobile: [
            { value: 390, name: 'iPhone 14' },
            { value: 360, name: 'Samsung Galaxy S23' },
          ],
        },
      },
    },
  },
});

---

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.