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