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.




This is the JSON of the design


This is the full HTML of the design, starting with the opening <html> tag to the closing </html> tag.


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.




This is the body part of the HTML that is added inside the <body></body> tags.


This is the CSS required for the design to render properly. You can add it inside the <style></style> tags.


This is the JS required for the design to render properly. You can add it inside the <script></script> tags.


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. For example, 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


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?