Eleph NPM | npm.io

Eleph

JSON to HTML Email Template Parser.

Install

npm install eleph

Usage

import parse from 'eleph'
import * as template from './template.json';

let html = parse(template)

Example Input/Output

let html = parse(tree)

let tree = {
  "type": "container",
  "tagName": "div",
  "attributes": {
    "className": "container",
    "id": "core-container"
  },
  "styles": {
    "backgroundColor": "#f3f3f3",
    "color": "#333",
    "fontSize": "14px",
    "padding": "30px"
  },
  "children": [
    {
      "type": "section",
      "tagName": "div",
      "attributes": {
        "className": "section",
        "id": "inner-section"
      },
      "styles": {
        "backgroundColor": "#fff",
        "color": "#333",
        "fontSize": "14px",
        "padding": "10px"
      },
      "children": [
        {
          "type": "element",
          "tagName": "p",
          "content": "This is the ultimate JSON to HTML Email Template Parser.",
          "attributes": {
            "className": "text"
          }
        }
      ]
    }
  ]
}

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

  <head>
    <title>
      Email Template
    </title>
    <!--[if !mso]><!-- -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      #outlook a {
        padding: 0;
      }

      .ReadMsgBody {
        width: 100%;
      }

      .ExternalClass {
        width: 100%;
      }

      .ExternalClass * {
        line-height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }

      table,
      td {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }

      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }

      p {
        display: block;
        margin: 13px 0;
      }
    </style>
    <!--[if !mso]><!-->
    <style type="text/css">
      @media only screen and (max-width:480px) {
        @-ms-viewport {
          width: 320px;
        }

        @viewport {
          width: 320px;
        }
      }
    </style>
    <!--<![endif]-->
    <!--[if mso]>
      <xml>
      <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
      </xml>
      <![endif]-->
    <!--[if lte mso 11]>
      <style type="text/css">
      .outlook-group-fix { width:100% !important; }
      </style>
      <![endif]-->
  </head>

  <body>
    <div class="container" id="core-container" style="background-color: #f3f3f3; color: #333; font-size: 14px; padding: 30px; ">
      <div class="section" id="inner-section" style="background-color: #fff; color: #333; font-size: 14px; padding: 10px; ">
        <p class="text">This is the ultimate JSON to HTML Email Template Parser.</p>
      </div>
    </div>
  </body>

</html>

Development

npm start

Credits

javascript json html email template

pretty

@infinitebrahmanuniverse/nolb-elep @everything-registry/sub-chunk-1568

1.0.0

6 years ago