✉️ Email Template Component

A reusable Shadow DOM-based web component for building customizable email templates with dynamic replaceable fields. Works with any frontend framework including React, Vue, Angular, or plain HTML.

🚀 Installation

npm install email-template-component

💡 Features

✅ Built with Shadow DOM for style encapsulation

✅ Fully customizable email fields (title, subject, from, etc.)

✅ Dynamic replaceable fields (e.g. {{username}}, {{date}})

✅ Framework-agnostic usage

✅ Emits custom events like email-template-change and email-template-save

✅ Accepts custom styles via the fieldstyles prop

🔧 Usage (React Example)

import "email-template-component";
import { useRef, useEffect } from "react";

function App() {
  const emailTemplateRef = useRef(null);

  const initialValue = {
    title: "Welcome Email",
    subject: "You're in!",
    from: "[email protected]",
    replyto: "[email protected]",
    otheremail: "[email protected]",
    description: "Hi {{username}}, thanks for signing up on {{date}}!"
  };

  const replaceableFields = [
    { key: "{{username}}", description: "The user's full name" },
    { key: "{{date}}", description: "Signup date" }
  ];

  const visibleFields = {
    title: true,
    subject: true,
    from: true,
    replyto: true,
    otheremail: true
  };

  const fieldstyles = {
    fields: {
      title: { backgroundColor: "#f0f9ff", borderColor: "#7dd3fc" },
      subject: { backgroundColor: "#f0f9ff", borderColor: "#7dd3fc" },
      from: { backgroundColor: "#f0f9ff", borderColor: "#7dd3fc" },
      replyto: { backgroundColor: "#f0f9ff", borderColor: "#7dd3fc" },
      otheremail: { backgroundColor: "#f0f9ff", borderColor: "#7dd3fc" },
      description: { borderColor: "#22c55e" }
    },
    saveButton: { backgroundColor: "#3b82f6", borderColor: "#2563eb" },
    replaceableFieldText: { borderColor: "#3b82f6" },
    replaceableFieldDescription: { borderColor: "#2563eb" },
    rulesHeader: { backgroundColor: "#3b82f6" },
    errorStyles: {
      backgroundColor: "#f0f9ff",
      borderColor: "#ef4444"
    }
  };

  useEffect(() => {
    const element = emailTemplateRef.current;

    const onChange = (event) => {
      console.log("Template Changed:", event.detail);
    };

    const onSave = (event) => {
      console.log("Template Saved:", event.detail);
    };

    if (element) {
      element.addEventListener("email-template-change", onChange);
      element.addEventListener("email-template-save", onSave);
    }

    return () => {
      if (element) {
        element.removeEventListener("email-template-change", onChange);
        element.removeEventListener("email-template-save", onSave);
      }
    };
  }, []);

  return (
    <email-template
      ref={emailTemplateRef}
      initialvalue={JSON.stringify(initialValue)}
      replaceablefields={JSON.stringify(replaceableFields)}
      visiblefields={JSON.stringify(visibleFields)}
      fieldstyles={JSON.stringify(fieldstyles)}
    ></email-template>
  );
}

export default App;

🌐 Use in Plain HTML

<email-template
  initialvalue='{"title":"Welcome","subject":"Hello {{name}}!"}'
  replaceablefields='[{"key":"{{name}}","description":"User name"}]'
  visiblefields='{"title":true,"subject":true}'
  fieldstyles='{
    "fields": {
      "title": {"backgroundColor":"#f0f9ff","borderColor":"#7dd3fc"},
      "subject": {"backgroundColor":"#f0f9ff","borderColor":"#7dd3fc"},
      "from": {"backgroundColor":"#f0f9ff","borderColor":"#7dd3fc"},
      "replyto": {"backgroundColor":"#f0f9ff","borderColor":"#7dd3fc"},
      "otheremail": {"backgroundColor":"#f0f9ff","borderColor":"#7dd3fc"},
      "description": {"borderColor":"#22c55e"}
    },
    "saveButton": {"backgroundColor":"#3b82f6","borderColor":"#2563eb"},
    "replaceableFieldText": {"borderColor":"#3b82f6"},
    "replaceableFieldDescription": {"borderColor":"#2563eb"},
    "rulesHeader": {"backgroundColor":"#3b82f6"},
    "errorStyles": {"backgroundColor":"#f0f9ff","borderColor":"#ef4444"}
  }'
></email-template>

📦 Attributes

| Attribute | Type | Description | |--------------------|--------|-----------------------------------------------------------------------------| | initialvalue | string | JSON string of the email fields like title, subject, from, etc. | | replaceablefields| string | JSON string array with keys and descriptions to define dynamic placeholders | | visiblefields | string | JSON string object to show/hide specific fields | | fieldstyles | string | JSON object to apply custom inline styles for each field/button/section |

🎨 Styling with fieldstyles

The fieldstyles prop allows you to customize the appearance of various parts of the component using CSS-in-JS style objects.

You can pass styles for the following elements:

| Key | Description | |-----------------------------|-------------| | fields.title | Style the title input field (e.g., background, border, font). | | fields.subject | Style the subject input field. | | description | Style the main textarea used for description/content. | | saveButton | Customize the appearance of the Save button. | | replaceableFieldText | Style dynamic text field inputs (used for placeholders or variables). | | replaceableFieldDescription | Style dynamic description inputs. | | rulesHeader | Style the top header area of the form/component. | | errorStyles | Define visual styles for validation error states (e.g., red border, background color). |

📤 Events

| Event Name | Description | |--------------------------|----------------------------------------------| | email-template-change | Triggered when the user edits any field | | email-template-save | Triggered when the save button is clicked |

🧱 Built With

• Web Components (Custom Elements + Shadow DOM)
• TypeScript
• Zero dependencies

📄 License

ISC License © 2025 Guddu Shakar Paul