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
})
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
Updated about 1 month ago