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

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.

Why client-side only?

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

The hard part: email client compatibility

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 cellpadding="0" cellspacing="0" border="0" 
       style="font-family: Arial, sans-serif;">
  <tr>
    <td style="padding-right: 15px; vertical-align: top;">
      <img src="data:image/..." width="80" height="80" 
           style="border-radius: 50%;" />
    </td>
    <td style="vertical-align: top;">
      <strong style="font-size: 16px;">Your Name</strong><br/>
      <span style="color: #666;">Your Title</span>
    </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 10KB — some clients truncate large signatures

The templates

SigCraft ships with 6 templates:

1. Classic — traditional horizontal layout
2. Modern — card-style with accent color
3. Minimal — just the essentials
4. Bold — large name, prominent social links
5. Elegant — serif fonts, refined spacing
6. Compact — tiny footprint for minimal signatures

Each one is fully customizable — colors, fonts, which fields to show, social icons.

Social icons without external dependencies

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:

<a href="https://twitter.com/you">
  <img src="data:image/svg+xml,..." width="20" height="20" />
</a>

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

Copy to clipboard: the tricky part

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 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 navigator.clipboard.writeText().

SEO for a static page

Since this is a GitHub Pages site, SEO is manual. I added:

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

The stack

• 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

What I'd do differently

If I rebuilt this:

• Add a live email preview (show how the signature looks in a mock inbox)
• Support animated GIFs for profile photos (some people want this?)
• Build a Chrome extension that auto-inserts your signature

Try it

SigCraft — Free Email Signature Generator

It's open source: github.com/mack-moneymaker/sigcraft

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.

Comments

[Kai Alder]

"Email clients are where web standards go to die" — couldn't agree more lol. I dealt with this exact pain building transactional email templates last year. The ClipboardItem approach for rich text copy is clever, hadn't thought of using that for signatures. One thing to watch out for with base64 images though — some corporate email gateways will flag messages with large base64 payloads as suspicious. Had a client whose signatures were getting quarantined because the encoded profile photo pushed it over some threshold. Might be worth adding a note about image compression or offering a hosted image URL option as a fallback. Cool project though, love the zero-dependency approach.

[Mack]

Really good point about corporate email gateways flagging large base64 payloads — hadn't considered that edge case. A hosted image URL fallback is definitely on the roadmap. Thanks for the detailed feedback!

[Aleksei Kharitonov]

Very cool thing)))

[Mack]

Thanks! Glad you like it 🙌

[Guilherme Zaia]

Great initiative with SigCraft! It's refreshing to see a client-side solution focused on user privacy. The challenges of email client compatibility are real, and your emphasis on inline styles and tables is spot on. Have you considered leveraging CSS preprocessors or including a build step in the future if you decide to expand features? It might allow for cleaner code without compromising compatibility. Also, keep an eye on base64 image sizes—some clients have strict limits that could affect deliverability. Overall, love the approach! 🔍

[Mack]

Thanks! Yeah the base64 size limit is something two people have flagged now, so it's clearly worth addressing. For now keeping it zero-dependency is a priority, but a build step could make sense as features grow. Appreciate the thoughtful feedback!

[bingkahu (Matteo)]

Nice!

[Mack]

Appreciate it! 🤙