i made an email signature builder

In my agency, I work with a lot of clients who need professional email signatures. The usual flow was to find a generator online, put in their info, realize it wants an account, try another one, deal with watermarks, eventually just build it manually in HTML.

This got old fast. Most signature tools either cost money, plaster their branding on free tiers, or collect way more data than they need to. I just wanted something simple that I could point clients to without explaining why they need to make an account.

So I built SignX. It runs in the browser, and saves info locally in your browser. You fill in your details, pick a template, copy the HTML, paste it into your email client. Done.

Stack

• Next.js 16 with App Router

• Tailwind CSS v4 for styling

• Zustand for state management

• TypeScript throughout

No backend means no database, no auth, no ongoing server costs. Zustand handles localStorage persistence out of the box.

Email HTML is weird

The tricky part was learning that email clients still render HTML like it's 2005. Outlook uses Microsoft Word's rendering engine. Gmail strips out <style> blocks. Every client has its own pitfalls.

In practice this means -

• Tables only, no flexbox or grid

• Inline styles on everything

• Full 6-digit hex colors (#333333 not #333)

• Images need explicit width and height attributes

Every template outputs nested tables with inline styles. The code looks ugly but it renders consistently across Gmail, Outlook, Apple Mail, and the random corporate clients my customers use.

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="font-size:16px;font-weight:bold;color:#333333;">
      ${escapeHtml(profile.fullName)}
    </td>
  </tr>
</table>

How it works

1. Fill in the form fields

2. Zustand updates state and saves to localStorage

3. Template function converts state to HTML

4. Preview renders in a Shadow DOM (keeps app styles separate)

5. Copy button puts HTML and plain text on clipboard

The Shadow DOM part is important. Without it, Tailwind styles bleed into the preview and it looks different from what actually gets pasted.

Templates

Seven templates right now -

• Classic

• Sidebar

• Minimal

• Bold

• Compact

• Banner

• Elegant

All of them share the same config options for colors, avatar, logo, etc. Switching templates keeps the data.

Try it

It's live at signx.bhaskarrijal.me.