How to build an email signature generator with Replit

Rule of thumb: if you are one person who needs one signature today, HubSpot’s free generator will do it for nothing, provided you have somewhere to host your photo. If a whole company needs the same signature installed in every mailbox without anyone pasting anything, the managed products are what you are paying for, and this template does not do that job. In between sits most small teams: five to fifty people who want to look alike, keep their photos at an address that outlives any subscription, and hand a new hire a link rather than a seat. That is who this build is for, and the running cost is the storage plan.

* The free-tier line to watch here is the pause. Supabase Free includes 1 GB of file storage and a 5 GB monthly egress allowance, which is thousands of signature photos and a great many inbox loads, but a free project is paused after a week without activity, and a signature builder is idle by nature once everyone has pasted theirs. A paused project serves no images, so every signature already in use loses its photo. Pro, from $25/mo, never pauses and raises file storage to 100 GB.

Prices and rates from supabase.com, developex.com and replit.com, checked September 2026.

The first two are all you need to start. Everything here stays inside the one browser tab, the app included once you publish it, and the GitHub copy is the one deliberate exception.

1. 01

   Start the app, ask for storage, and set the rules

   The storage comes with the workspace, so it goes in the opening message. So do the three export rules that matter most on this build.

   PromptSet up the project and the storageCopy

   Set up a React 18 + Vite + TypeScript app with Tailwind and a small server of its own, and add App Storage to this Repl for uploaded images, the storage Replit provides, not anything outside. Write a short notes file at the project root saying this is an email signature and QR code builder, fixing the vocabulary as signature, layout, design, social links, QR code and export, and recording three standing rules: every style in the exported HTML is inline on the element it belongs to, layouts use tables rather than flex and fonts every operating system ships, and every image in a signature is a hosted file linked by address, never embedded. Uploads go through a server route that checks the file is an image under 5 MB before storing it, and the server serves the stored images at a public address.

   The rules are worth writing into the notes file rather than a single message. Flex in the preview and inline icons in the export are both natural suggestions for any assistant, and both are holes in the signature once Outlook has it.

2. 02

   Build the form and the live preview

   The screen you will live in. Five steps in a sidebar and a preview beside them inside a mock inbox, redrawn on every keystroke, with rows you can drag into a new order. Check the preview after each change here rather than stacking several.

   PromptBuild the form and the previewCopy

   Build a single page with two tabs, Signature Generator and QR Code Generator, and start with the first. Put a five-step sidebar on the left (Details, Images, Social, Template, Design) that I can move through in any order, and a live preview on the right inside a mock inbox with a To line, a Subject line and a short confidentiality footer. Details holds full name, job title, company, email, phone, website, an optional address, a QR code address with a show toggle, and custom fields I can add and remove. Social holds LinkedIn, X, Instagram, Facebook, YouTube and GitHub. Redraw the preview on every keystroke, let me drag the rows of the signature into a new order, and add a Done Editing view that shows the finished signature with Copy HTML, Download PNG and Delete Draft buttons under it. Keep every field optional and make sure an empty field leaves no blank line behind.

   This is the step where checkpoints earn their keep. A preview that was right two messages ago and is not now is a one-click problem rather than an afternoon.

3. 03

   Add the six layouts and the design step

   The same details six ways, plus eight system fonts and eight accent colours. Every layout has to survive a missing photo and a missing phone.

   PromptBuild the layouts and the design stepCopy

   Add six layouts to the Template step, each with a small preview card: Modern (name, accented title, contact lines, icons and photo in a row), Classic (a serif face with a rule above the company), Minimal (one line with dots between items), Professional (a photo or initials in a circle beside the details), Creative (a coloured bar down the left edge) and Compact (everything on two short lines). Switching layout keeps everything typed. In the Design step, offer eight fonts that ship with every operating system (Arial, Helvetica, Georgia, Times New Roman, Verdana, Tahoma, Trebuchet MS and Courier New) and eight accent colours applied to links and the job title, with a click on the chosen colour clearing it. Make every layout handle a missing photo, a missing phone and a long job title without collapsing, and show me all six with only a name filled in.

4. 04

   Host the images through your server, and add the QR tab

   Photos and QR images stored in the workspace and served by your own route at a public address, because a mail client shows only an image it can fetch. Then the second tab.

   PromptAdd uploads and the QR generatorCopy

   In the Images step, add a photo or logo upload that sends the file to a server route, which checks it is an image under 5 MB, stores it in App Storage under a random name and returns a public address the server serves it from, then puts that address into the signature with a preview and a remove button. When the QR toggle in Details is on, draw a QR code of the address in the preview, and on export draw the same code as a PNG, store it the same way and link it by address, because a mail client will not show an inline data image. Then build the QR Code Generator tab: one address field, a live code drawn at the highest error-correction level with a quiet margin, https:// added if I left the prefix off, and a Download button that produces a 400-pixel PNG with an SVG fallback. Encode the address exactly as typed, with no redirect and no tracking.

   The size check is yours to write here, because there is no bucket setting doing it for you. Upload a 6 MB photo and a text file on purpose and make sure the route refuses both.

5. 05

   Build the export, then paste it into a real inbox

   What the product actually is. Copy HTML with every style inline, hosted icon images and table layouts, and Download PNG rendered from the preview at double resolution. Then a message to yourself from a phone.

   PromptBuild Copy HTML and Download PNGCopy

   Build the export. Copy HTML generates the signature for the current layout with every colour, font, size and spacing as an inline style on its element, laid out with tables rather than flex or grid, using only the eight system fonts, with the photo, the QR and each social icon as a hosted image linked by address and carrying alt text, no inline SVG anywhere, and nothing wider than 600 pixels. Store the six social icons in App Storage once and serve them from the same route. Put the result on the clipboard and confirm with a toast. Download PNG renders the preview at double resolution on a white background, waits for every hosted image to load, and downloads email-signature.png. Then tell me how to paste the HTML into Gmail, Apple Mail and Outlook, and what each one is known to strip.

   Send yourself a message from a phone and open it in a second client. The preview is not the test.

6. 06
   Destination

   Decide about sign-in, then publish and check the images from outside

   Accounts and saved signatures are optional. Then publish, checking who the app is visible to first, and open a sent signature on a phone, because the images now come from the published app.

   PromptAdd sign-in if wanted, test, and publishCopy

   Two paths, and I will pick one. If I want accounts: add email-and-password sign-up and login with a server-side session, a signatures table in this Repl’s Postgres that saves the whole form as a row per person, a My signatures list to reload one, and make the upload route accept files only from a signed-in session. If I do not: keep the upload route open but limited to images under 5 MB, and tell me how to keep the app visible only to my team through Publishing. Either way, help me test it as a stranger: a private window, a text file and a 6 MB image that should both be refused, a signature copied and pasted into a mail client and sent to a phone. Then walk me through Publishing: which deployment type fits an app whose server does little besides store and serve images, and who it should be visible to, given that every signature will load its photo from the published address.

Review the access rules (row-level security policies) on every table. For each one, tell me in simple terms who can view, add, edit, and delete records, confirm that people can only reach their own data while the right roles can reach more, and flag anything left open that shouldn’t be.

One rule outranks everything above it: the storage credentials and any AI provider key you add belong in Secrets only: never in anything the browser downloads, and never in a repository. If either gets out, treat it as compromised and rotate it the same day.

All four are Replit rather than a third party, so the choice is shape rather than vendor, and Autoscale suits most of these apps. Two things specific to this build: the server is tiny, because the HTML is generated in the browser and the only server work is storing and serving images, and those images are loaded by every recipient of every message, so the published address is what the whole team’s signatures depend on. Review who the app is visible to before that first release.

Create one server-side function called ai that holds my AI provider key in its secrets and never returns it. It accepts a task name and a payload, calls a current model on my provider’s price list, and returns the result. Before contacting the provider it writes a row to an ai_calls table (task, model, tokens in and out, a cost estimate, success or failure) and checks the calls so far today against a limit I can change without a deploy, and answers with a friendly “that is enough for today” instead of an error when it is reached. The limit and the cost are never accepted from the browser. Finish with a small usage panel in the app that shows calls and estimated spend this month.

Add a “Paste your details” box above the Details step. Send the pasted text to the ai function and ask for the form fields it can find (full name, job title, company, email, phone, website, address, and social profile links by network), each with a confidence. Fill the form with the results, highlight anything the model was unsure about for me to confirm, and never overwrite a field I have already typed unless I ask.

When a logo or photo is uploaded, add a “Suggest a design” button that sends the image to the ai function with the list of the eight fonts and eight accent colours this app offers and asks for the closest pairing and one sentence of reasoning. Show the suggestion as a preview I can apply or dismiss, and never change the design without my click.

Add a “Check compatibility” action beside Copy HTML. Send the generated HTML to the ai function with a checklist of what Gmail, Outlook for Windows, Outlook.com, Apple Mail and Yahoo Mail do not render (inline SVG, flex and grid layout, web fonts, background images, images without alt text, anything wider than 600 pixels) and ask for a plain-language list of what will break where and how to fix each one. Show the list in a panel, and where a fix is mechanical, offer a button that applies it and regenerates the HTML.

Add a “Team” tab that accepts a pasted spreadsheet or CSV of people, sends the header row and three sample rows to the ai function to map the columns onto the signature fields, shows me the mapping to confirm, then generates one signature per row using the current layout and design, with each person’s photo left as a placeholder they can replace. Offer the result as a zip of HTML files plus a PNG each, and log one ai call for the mapping only, since generating the signatures needs no model.

A cheap model is plenty for most of the prompts above. Save Pro’s stronger models for the one or two spots where the extra reasoning actually pays for itself. Add any provider key through Replit’s own Secrets tool rather than hard-coding it, and keep every AI feature behind one server-side function so a single key covers the whole app.