Skip to main content
Version: 1.157.0

HTML

HTML is a built-in tool so users can add custom HTML to their designs. This tool is supported for both display modes: emails and web pages.

Enable / Disable​

HTML tool is enabled by default but you can choose to disable it.

unlayer.init({
  tools: {
    html: {
      enabled: false,
    },
  },
});

CodeMirror Options​

CodeMirror is the code editor component used for the HTML editor. It has a variety of configuration options that you can override.

In this example code, we will disable the line wrapping in the HTML editor.

unlayer.init({
  tools: {
    html: {
      properties: {
        html: {
          editor: {
            widgetParams: {
              codeMirrorOptions: {
                lineWrapping: false,
              },
            },
          },
        },
      },
    },
  },
});

Default Values​

HTML tool comes with the following default values. You can choose to change any of these.

PropertyDefault Value
html<strong>Hello, world!</strong>
containerPadding10px

Here are a few examples on how to change these default values.

HTML​

unlayer.init({
  tools: {
    html: {
      properties: {
        html: {
          value: '<strong>Hello, world!</strong>',
        },
      },
    },
  },
});

Container Padding​

unlayer.init({
  tools: {
    html: {
      properties: {
        containerPadding: {
          value: '10px',
        },
      },
    },
  },
});

HTML Sanitization​

Setting safeHtml: true will remove invalid HTML structures to prevent potential security issues and ensure valid HTML output.

Table Sanitization​

For example, if you input an invalid table structure like:

<tr>
  <td>Invalid table</td>
</tr>

It will be removed because it's missing the required <table> element. A valid table structure should be:

<table>
  <tr>
    <td>Valid table</td>
  </tr>
</table>

If you need to disable this sanitization, you can set safeHtml: false in your initialization options.