How to build an email signature generator with Bolt

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 bolt.new, checked September 2026.

The GitHub step comes before Bolt exists for you at all. Everything after it happens inside the browser tab Bolt opens, with no install.

1. 01

   Create the project online, import it, then set the rules and the bucket

   Bolt has no upload button, so the project has to exist as an online repository first. The export rules and the bucket come next, before any screen, because everything after this uploads to it.

   PromptSet up, connect the database, create the bucketCopy

   This project is an email signature and QR code builder. Set it up as React 18 + Vite + TypeScript with Tailwind, and keep this vocabulary throughout: signature, layout, design, social links, QR code, export. Three standing rules for the whole build: 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. Now connect a database and create one public storage bucket called signature-images, readable by anyone, limited to image types and 5 MB per file. No sign-in for now.

   Keep the repository private. Bolt commits to it automatically as you build, and the environment file naming your storage project will be in it.

2. 02

   Clear the context, then get the form and the preview working in the tab

   The screen you will live in. Five steps in a sidebar and a preview beside them inside a mock inbox, redrawn on every keystroke. The preview is the running app, so what you see is what the export will draw from.

   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.

   Type a name and nothing else, then fill every field. Both states have to look deliberate, and the preview in front of you is the real one.

3. 03

   Talk the six layouts through in Plan Mode before they are written

   This is the largest and most expensive-to-redo screen set in the build. Agreeing how one set of details reaches six layouts, and how each survives a missing field, before Bolt writes a line is exactly what Plan Mode is for.

   PromptBuild the layouts and the design stepCopy

   Use Plan Mode for this one. I need six layouts in 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), with switching layout keeping everything typed. In the Design step, 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. Talk me through how one set of details and one design reach all six layouts, and how each layout handles a missing photo, a missing phone and a long job title, then build it.

   Plan Mode costs a message and can save a rebuild. Six layouts that each read the design settings differently is the rebuild it saves.

4. 04

   Point one prompt at the images: uploads and the QR tab

   Name the feature rather than letting the prompt range over the whole project. Photos and QR images uploaded to your bucket and linked by address, then the second tab.

   PromptAdd uploads and the QR generatorCopy

   Working on images only. In the Images step, add a photo or logo upload that checks the file is an image under 5 MB, uploads it to the signature-images bucket under a random file name, and puts the public 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, upload it to the same bucket 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.

   Naming the feature keeps the prompt narrow, which Bolt charges you less for and which makes the result easier to check.

5. 05

   Clear the context, then build the export and 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 as small PNGs in the bucket once and link them. 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 in the tab is not the test.

6. 06
   Destination

   Decide about sign-in, lock the bucket, try it as a stranger, then ship it

   Accounts and saved signatures are optional and the bucket rule follows the decision. Then a private window, an upload that should fail, and publish, to Bolt’s own hosting by default, or to Netlify if you would rather keep the domain there.

   PromptAdd sign-in if wanted, harden, test, and publishCopy

   Two paths, and I will pick one. If I want accounts: add sign-up and login with email and password, a profiles table filled by a trigger on sign-up, a signatures table that saves the whole form as a row per person, a My signatures list to reload one, and per-user upload rules so a signed-in person writes only under their own folder in the bucket while everyone can still read. If I do not: keep uploads open but scoped to the bucket, images only and 5 MB. Either way, walk me through the app as a stranger in the preview: try to upload a text file and a 6 MB image, copy a signature, paste it into a mail client and send it to a phone. Tell me which Supabase plan keeps the bucket awake when nobody has opened the builder for a week, and once it holds up, publish it.

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 only key in the shipped app is the publishable one, and it is designed to be seen. The moment you add a server-side function for an AI provider, that provider key lives in the function’s secrets and never in the app or a repository. If it ever leaks, assume it was used and issue a new one the same day.

Two questions decide this, and neither is about speed. Who should be able to open the builder, because as shipped anyone who can reach the address can upload an image to your bucket, so a company-only tool belongs behind a login page or a host that can put a password in front of it. And does a refresh on the editor still show the editor, which is one routing rule on each host, with Vercel’s already in the template. Recipients never touch any of this: they load two images from your bucket and nothing else.

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.

Pick a lighter model for the high-volume prompts above and save a stronger one for wherever the reasoning actually matters. That is the same token-budget logic as the rest of this page, applied to the app’s own AI calls instead of the build itself. When Bolt flags a missing secret, add the key through its secrets settings instead of pasting it into the chat, and keep every AI feature behind one server-side function so there’s only one key to manage.