Skip to main content

Vanilla JS Setup

This guide covers embedding Unlayer directly with plain HTML and JavaScript. No framework or build tools required.

Step 1: Add the Embed Script​

Include the Unlayer embed script in your HTML page:

<!DOCTYPE html>
<html>
  <head>
    <title>Unlayer Editor</title>
    <script src="https://editor.unlayer.com/embed.js"></script>
  </head>
  <body>
    <div id="editor-container" style="height: 600px;"></div>
  </body>
</html>

Step 2: Initialize the Editor​

<script>
  unlayer.init({
    id: 'editor-container',
    displayMode: 'email',
  });
</script>

Step 3: Add Export and Save Buttons​

<button id="export-btn">Export HTML</button>
<button id="save-btn">Save Design</button>

<script>
  document.getElementById('export-btn').addEventListener('click', function () {
    unlayer.exportHtml(function (data) {
      var html = data.html;
      var design = data.design;
      console.log('HTML output:', html);
    });
  });

  document.getElementById('save-btn').addEventListener('click', function () {
    unlayer.saveDesign(function (design) {
      console.log('Design JSON:', design);
      // Send to your backend
    });
  });
</script>

Complete Example​

<!DOCTYPE html>
<html>
  <head>
    <title>Unlayer Editor</title>
    <script src="https://editor.unlayer.com/embed.js"></script>
  </head>
  <body>
    <div style="padding: 16px;">
      <button id="export-btn">Export HTML</button>
      <button id="save-btn">Save Design</button>
    </div>
    <div id="editor-container" style="height: calc(100vh - 60px);"></div>

    <script>
      unlayer.init({
        id: 'editor-container',
        displayMode: 'email',
      });

      document
        .getElementById('export-btn')
        .addEventListener('click', function () {
          unlayer.exportHtml(function (data) {
            console.log('HTML:', data.html);
          });
        });

      document
        .getElementById('save-btn')
        .addEventListener('click', function () {
          unlayer.saveDesign(function (design) {
            console.log('Design:', design);
          });
        });
    </script>
  </body>
</html>

Configuration Options​

Pass additional options to customize the builder:

unlayer.init({
  id: 'editor-container',
  displayMode: 'email',
  appearance: {
    theme: 'modern_light',
  },
  features: {
    textEditor: {
      spellChecker: true,
    },
  },
});

Loading a Saved Design​

// After the editor is ready
unlayer.addEventListener('editor:ready', function () {
  var savedDesign = /* fetch from your backend */;
  unlayer.loadDesign(savedDesign);
});

What's Next​