email-builder/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
    <link rel="icon" type="image/png" sizes="32x32" href="/src/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/src/favicon/favicon-16x16.png" />
    <meta name="viewport" content="width=900" />
    <meta name="description" content="EmailBuilder.js interactive playground. Brought to you by Waypoint." />
    <title>EmailBuilder.js &mdash; Free and Open Source Template Builder</title>
    <style>
      html {
        margin: 0px;
        height: 100vh;
        width: 100%;
      }
      body {
        min-height: 100vh;
        width: 100%;
      }
      #root {
        /* height: 100vh; */
        width: 800px;
        position: relative;
      }
      .root-wrapper {
        padding: 100px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="root-wrapper">
      <div id="root" class="email-builder-container"></div>
    </div>
    <script type="module">
      const testData = {
        "root": {
          "type": "EmailLayout",
          "data": {
            "backdropColor": "#F5F5F5",
            "canvasColor": "#FFFFFF",
            "textColor": "#262626",
            "fontFamily": "MODERN_SANS",
            "childrenIds": [
              "block-1727858083795"
            ]
          }
        },
        "block-1727858083795": {
          "type": "Text",
          "data": {
            "style": {
              "fontWeight": "normal",
              "padding": {
                "top": 16,
                "bottom": 16,
                "right": 24,
                "left": 24
              }
            },
            "props": {
              "markdown": false,
              "text": "Test template"
            }
          }
        }
      }

      import('/src/main.tsx')
        .then(module => {
          module.render('root', { data: testData, onChange: (json, html) => {
            console.log("onChange", json, html)
          }});
        })
        .catch(error => {
          console.error('Error loading the module:', error);
        });
    </script>

    <!-- Prod build -->
    <!-- <script src="dist/listmonk-email-builder.umd.js"></script>
    <script>
      EmailBuilder.render("root");
    </script> -->
  </body>
</html>