I Built a Free Email Signature Generator in a Day — No Backend Required

Source: Dev.to

The idea

I needed an email signature. The existing generators are either ugly, paywalled, or track you. So I built one.

SigCraft is a free, open‑source email signature generator. No signup, no backend, no tracking. Pure client‑side HTML/CSS/JS.

Email signatures are personal. They contain your name, photo, phone number, social links. I didn’t want any of that touching a server.

Everything runs in your browser:

• Photo uploads are converted to Base64 (embedded directly in the signature)
• Preview renders in real‑time
• Copy gives you both rich text and raw HTML
• Zero network requests after page load

If you’ve never built HTML emails, let me save you some time: forget everything you know about modern CSS. Email clients are where web standards go to die. Outlook uses Word’s rendering engine. Gmail strips <style> tags. Yahoo does… Yahoo things.

The solution

Tables. In 2026, we’re still using <table> layouts for email. I’m not proud of it, but it works everywhere:

<table>
  <tr>
    <td>
      <strong>Your Name</strong><br>
      Your Title
    </td>
  </tr>
</table>

Key rules I learned

• Inline styles only — external/internal CSS gets stripped
• No flexbox, no grid — tables are your layout system
• Base64 images work in most clients, but some (Outlook desktop) may block them
• Border‑radius works in most clients except older Outlook
• Keep it under 10 KB — some clients truncate large signatures

Templates

SigCraft ships with six templates, each fully customizable (colors, fonts, fields, social icons).

Icons without external resources

I didn’t want to rely on Font Awesome CDN or external icon services (email clients block external resources). Instead, I embedded SVG icons as data URIs:

<!-- Example SVG as data URI -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTAgMGgxMjB2MTIwaC0xMjB6IiBmaWxsPSIjMDAwIi8+PC9zdmc+" alt="Icon">

This means social icons render even when images are blocked — the Base64 data is part of the signature itself.

Copy options

Users need two copy options:

1. Rich text — paste directly into Gmail/Outlook settings
2. Raw HTML — for email clients that accept HTML input

Rich‑text copy uses the Clipboard API with the HTML MIME type:

const blob = new Blob([signatureHTML], { type: "text/html" });
const item = new ClipboardItem({ "text/html": blob });
await navigator.clipboard.write([item]);

This preserves formatting when pasting into email settings. The HTML copy is just:

await navigator.clipboard.writeText(signatureHTML);

Implementation details

• HTML/CSS/JS — that’s it. No framework, no build step.
• GitHub Pages — free hosting, automatic deploys on push.
• Total cost: $0 — no server, no database, no API keys.

SEO (manual)

• OpenGraph + Twitter Card meta tags
• JSON‑LD structured data (WebApplication schema)
• FAQ section targeting long‑tail keywords
• Semantic HTML (<header>, <main>, <footer>)

Future improvements

If I rebuilt this, I would consider:

• Adding a live email preview (show how the signature looks in a mock inbox)
• Supporting animated GIFs for profile photos (some people want this)
• Building a Chrome extension that auto‑inserts your signature

SigCraft — Free Email Signature Generator

It’s open source:

No signup. No paywall. No tracking. Just signatures.

---

I’m building tools and SaaS products in public. If you’re into dev tools, I also built Rendly — a screenshot and OG image API for developers.