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
})

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'
  }
})

REST API

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


Did this page help you?