Export HTML

Now that you have set up the editor in your application and users are creating content, it's time to save the resulting work i.e HTML.

This is how you can export the design's HTML.

Save Button

Most applications will add a save button that calls this export function.

unlayer.exportHtml(function (data) {
  var json = data.design; // design json
  var html = data.html; // final html

  // Do something with the json and html
});

Callback Parameters

The exportHtml callback returns the following parameters.

Name	Description
design	This is the JSON of the design
html	This is the full HTML of the design, starting with the opening <html> tag to the closing </html> tag.
chunks	This includes the chunks of HTML separately in case you want to build your own layout. Check the chunk parameters below.

---

Chunk Parameters

The following chunks of HTML are available.

Name	Description
body	This is the body part of the HTML that is added inside the <body></body> tags.
css	This is the CSS required for the design to render properly. You can add it inside the <style></style> tags.
js	This is the JS required for the design to render properly. You can add it inside the <script></script> tags.
fonts	This includes any web fonts or custom fonts used in the design so you can load them.

---

Export Options

You can also pass certain options to this function as a second parameter.

Cleanup

By default, we clean up the final HTML and remove unused HTML class names and CSS styles. If you want to disable that feature, you can pass cleanup: false.

unlayer.exportHtml(
  function (data) {
    var json = data.design;
    var html = data.html;
  },
  {
    cleanup: true,
  },
);

Minify

By default, the HTML output is not minified or compressed. However, it is recommended to export the HTML minified and compressed as it can reduce the file size by up to 25%.

unlayer.exportHtml(
  function (data) {
    var json = data.design;
    var html = data.html;
  },
  {
    minify: true,
  },
);

Outlook Support

Email exports include compatibility markup for classic Outlook for Windows and legacy Internet Explorer by default. If your recipients use email clients that render standard HTML and CSS, pass outlookSupport: false to reduce the exported HTML size.

unlayer.exportHtml(
  function (data) {
    // Send or save data.html
  },
  {
    minify: true,
    outlookSupport: false,
  },
);

This removes conditional comments and their Outlook-only content, including layout tables, VML backgrounds and buttons, and Outlook image copies. The normal HTML content is preserved. The option also applies to conditionals in custom HTML and custom exporters, and to chunks.body and chunks.tags.

Only use this option when you can accept reduced layout, image scaling, background image, and button compatibility in classic Outlook for Windows. This also removes Outlook's image-scaling safeguards and conditionals around web-font links. Content hidden on desktop may also appear in classic Outlook when its conditional hiding markup is removed. Modern Outlook clients that use standard HTML rendering keep the normal HTML version. Other display modes and AMP HTML are unchanged; an AMP export's normal HTML fallback honors the option.

The option applies to that export call. Preview, including Inbox Previews, and Send Test Email keep the default compatibility markup. Editor versions released before this option ignore it.

Reducing Email Size

Start with minify: true and keep the default cleanup enabled. Use fewer rows and columns where possible, remove unused content, and avoid repeating large blocks of inline HTML or CSS. Use outlookSupport: false only if the compatibility tradeoff above fits your recipients.

Measure the UTF-8 byte size of the final HTML after your email provider adds tracking links or other markup:

const bytes = new TextEncoder().encode(html).length;

Leave room below Gmail's approximately 102 KB clipping limit. Minification and the Outlook opt-out reduce markup but do not guarantee that a long email will avoid clipping. Remote image file sizes are separate from the HTML size; embedded image data contributes to it.

Merge Tags

If you want the Merge Tags in your design to be replaced by different values, you can pass the mergeTags object to export options.

unlayer.exportHtml(
  function (data) {
    var json = data.design;
    var html = data.html;
  },
  {
    mergeTags: {
      first_name: 'John',
      last_name: 'Doe',
    },
  },
);

Inline Styles

Inline Styles options can be used to Inline the global css styles for links. This is useful in some instances for the email builder where Gmail or some other clients may not respect the link styles. By default, this is set to false.

unlayer.exportHtml(
  function (data) {
    var json = data.design;
    var html = data.html;
  },
  {
    inlineStyles: true,
  },
);

---

Cloud API

You can also use our Cloud API if you want to export a design to HTML from a server-to-server API call. Learn More