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.

Property	Default Value
html	`<strong>Hello, world!</strong>`
containerPadding	`10px`

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