Card

An open source html email template builder with drag & drop editor

Digital Marketing & SEOTypeScriptAGPL-3.0

Abstract

Card is an open-source Digital Marketing & SEO project. An open source html email template builder with drag & drop editor. Driven by a passion for open source, I want to provide a truly independent alternative. I am releasing the core of my commercial project, MySigMail Card, to the community to ensure that everyone has access to a powerful, self-hosted email builder. It is built using TypeScript. Key capabilities include: Visual drag-and-drop editor; Component catalog with ready-to-use blocks: Menu, Header, Content, Feature, Call to Action, E-Commerce, Footer; Spot editing with a component tree (Block -> Row -> Cell -> Atom). The complete source code is publicly available on GitHub under the GNU Affero General Public License v3.0, making it a useful reference for students building a Digital Marketing & SEO mini project or final-year project.

1. Introduction

Driven by a passion for open source, I want to provide a truly independent alternative. I am releasing the core of my commercial project, MySigMail Card, to the community to ensure that everyone has access to a powerful, self-hosted email builder.

We live in an era of increasing vendor lock-in and centralized control. We have seen instances where entire regions are cut off from services due to geopolitical reasons, leaving developers and users stranded. Software should be accessible and reliable, regardless of borders.

An open source html email template builder with drag & drop editor

2. Objective

An open source html email template builder with drag & drop editor

This project demonstrates how TypeScript can be applied to a real-world Digital Marketing & SEO problem.

3. Key Features / Modules

  • Visual drag-and-drop editor
  • Component catalog with ready-to-use blocks: Menu, Header, Content, Feature, Call to Action, E-Commerce, Footer
  • Spot editing with a component tree (Block -> Row -> Cell -> Atom)
  • Atom types: text, button, divider, image, menu
  • JSON export/import from the UI
  • Import modes: replace and append
  • Template validation + sanitization on import
  • Auto-persist to localStorage and hydration on reload
  • Preview rendered in Shadow DOM to isolate editor styles

4. Technology Stack

TypeScript

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

  • Node.js (LTS) and npm / yarn / pnpm
  • VS Code or any code editor
  • Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/mysigmail/card.git
cd card

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

  • Export reports to Google Sheets or PDF
  • Schedule weekly automated reports
  • Add competitor comparison

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

  1. Which marketing or SEO problem does this tool solve?
  2. Which data sources or APIs does it use (Search Console, Analytics, social platforms)?
  3. Which metrics or KPIs does it report and how are they calculated?
  4. How could the output help a business make decisions?
  5. How would you schedule it to run automatically?

9. Source Code & License

This project is developed by mysigmail and published on GitHub under the GNU Affero General Public License v3.0. Please follow the license terms and credit the original author when you use or modify this code.

View Source on GitHubDownload ZIP

Want to build this as your internship project?

Work on a Digital Marketing & SEO project like this with mentor guidance, weekly reviews and an internship certificate from Training Trains, Erode — online or offline.

Apply for Digital Marketing & SEO Internship