How to build an email signature generator with Lovable
Build a working signature builder in a browser tab, message by message. A form beside a live preview, six layouts, fonts and colours, photos hosted where any inbox can load them, a matching QR code, and clean HTML or a PNG for any mail client, with Lovable creating the storage bucket in the same chat that builds the screens.
Lovable
$ Build an email signature and QR code builder: I fill in my name, title, company, contacts and social links, pick one of six layouts, change the font and accent colour, upload a photo, watch a live preview, then copy clean HTML for my mail client or download a PNG. A second tab turns any address into a QR code I can download.
- Live preview updating in the tab
- Layouts, hosting and export built
- Ready to preview
Overview & core architecture
An email signature generator does three basic things: it gives you a form to type your info, shows a live preview, and generates code you can paste into your email app. It also needs a small online storage space for your images.
Most companies rent signature tools and pay a monthly fee per user. In those paid tools, images load from the vendor’s servers, so signatures stop working if you cancel the subscription. Free generators don’t store anything for you. You have to upload your photos online yourself and paste the link. Every tool works in one of these two ways.
This tool is a single web page with two tabs. The “Signature” tab lets you edit details, links, and layout in a sidebar while updating a live preview next to it. You can copy the HTML code directly or save the preview as an image. The “QR” tab turns any web link into a downloadable QR code. The only server feature is a shared online storage folder where photos and QR codes live so they can load inside an email inbox.
With this tool, you pay no monthly user fees, keep full control of your image storage, and own the HTML code. However, it comes with clear trade-offs: user login and saved signatures are coded into the database but not connected to a visual interface, anyone with the direct link can upload images to the storage folder, QR codes are static, and a few design elements will not render in Gmail or Outlook.
The export is the product
A signature might look great in a browser but break in Outlook because email apps process code differently. To prevent this, our HTML applies colors, fonts, and sizes directly to every element, links to photos by web address instead of attaching them, and uses standard fonts built into every computer.
Images live at an address
Email apps do not attach images directly. They fetch them from web links. The app uploads your photos and QR codes to an online storage folder and writes those link addresses into the HTML code. This storage folder must stay active so recipient inboxes can always display your images.
One page, two tools
The signature builder and QR generator live on the same page but work independently. The QR tab creates a code in your browser that you can save as an image. Inside a signature, that same code is generated, uploaded to your online storage, and linked by web address, ensuring every email app can display it.
Essential signature builder components
Six building blocks make up the app. Get the export right first, because every layout, colour and photo only matters if it survives the paste into a mail client, and describe each block to your AI coding tool in plain words when you want it built or changed.
A five-step form beside a live preview
Details (name, title, company, email, phone, website and any custom fields you add), images, six social networks, a layout and a design step, in a sidebar you move through in any order. The preview beside it redraws on every keystroke inside a mock inbox with a To and Subject line, so you see the signature where it will actually sit, and a Done Editing view shows the finished thing with the two export buttons under it.
Six layouts from one set of details
Modern, Classic, Minimal, Professional, Creative and Compact each arrange the same fields differently: a serif with a rule above the company, a single line with dots between items, initials in a circle where there is no photo, a coloured bar down the left edge. Switching layout keeps everything you typed.
Fonts, an accent colour and drag-to-reorder
Eight fonts that ship with every operating system, so a recipient sees the one you chose, and eight accent colours applied to links and titles. In the preview, the rows of the signature can be dragged into a new order, and the order travels into the export.
Copy HTML and Download PNG
Copy HTML puts the signature on your clipboard with every style inline and the images linked by address, ready to paste into a mail client’s signature settings. Download PNG renders the preview at double resolution to a file, for a client that only takes an image. Two things in the HTML need attention before a team relies on it, and the security section names them.
Photos and QR images hosted for you
A photo or logo is checked to be an image under 5 MB, uploaded to a public storage bucket and linked from the signature by its address. Turn on the QR inside a signature and the app draws the code, uploads it the same way and links it, because a mail client only shows an image it can fetch.
A QR code generator of its own
The second tab takes any address, adds the https:// prefix if you left it off, draws the code at the highest error-correction level and downloads it as a 400-pixel PNG, falling back to SVG if the browser cannot rasterise it. The code encodes the address exactly as typed, so it works for as long as the address does and tracks nothing.
Own the signature builder or rent it by the seat
Every product below meters something: a price per person per month, a minimum head count, a fee per signature, or a subscription that keeps the images and the QR codes working. A builder you own has no meter, which is the thing to hold on to while you read the table.
Build your own
Own the tool outright: the form, the six layouts and the export are yours to change, the photos sit in a bucket you control, and the recurring bill is the storage plan, free to start and $25/mo once the images have to stay up without anyone opening the app. From a plain description, your AI coding tool produces the form, the layouts and the HTML that survives a mail client.
- No price per person, so the fiftieth signature costs what the first one did
- Images hosted at an address you control, so a signature does not go blank when a subscription lapses
- Six layouts and a design step you can change by describing the change
- HTML you can paste into any mail client, with nothing tracking who opened it
- QR codes that encode the address itself and never stop working
- Nothing to migrate away from, because the code and the bucket are ordinary and yours
Rent the software
HubSpot · WiseStamp · Exclaimer · Newoldstamp · UniqodeRenting buys you a signature this afternoon, and on the managed products somebody else installs it in every mailbox, keeps it current from your staff directory and swaps the banner under it for the next campaign. What it costs is a price per person, sometimes a minimum head count, and images that work for as long as you pay.
- Live today, with a template gallery larger than six
- Central deployment into every mailbox on the paid managers, with no pasting
- A price per person per month, and a minimum of ten on the products built for IT departments
- Free generators that host no images, so you find somewhere to put your photo first
- A signature that stops working when the subscription does, in the vendor’s own words
- Dynamic QR codes that stop redirecting when the account goes inactive
The free counterweight, and worth reading first. It is a form and an export with no account behind it, and it hosts nothing: the page tells you to put your logo somewhere else and paste in the address. That hosting is the one job this template’s backend does, and it is the difference between a generator and a builder a team can share.
hubspot.com · checked September 2026
The per-person meter in its plainest form: a platform fee per month and a dollar per employee on top, billed for the year, with the tiers priced by how much marketing machinery (campaign banners, analytics, rules) you want under every signature. The individual plan is the closer comparison for a freelancer, and even it charges for each team member added.
wisestamp.com · checked September 2026
The IT department’s version: signatures applied centrally to every mailbox, synced from your directory, with a minimum of ten seats and an annual bill. Cheap per person and the right shape for a company where nobody should be pasting anything, which is also the job this template does not do, since each person copies their own HTML.
exclaimer.com · checked September 2026
The meter is the signature itself, and the FAQ says the quiet part out loud: the images are the vendor’s, so every signature your team pasted goes blank when the subscription ends. Owning the bucket is the answer to exactly that sentence, and it is why this guide spends a security card and its launch-day warning on keeping the bucket reachable.
newoldstamp.com · checked September 2026
The QR half of the market. A dynamic code redirects through the vendor, which is what lets you change the destination later and count the scans, and it is also why the code dies with the account. The codes this template makes are static: the address is in the pixels, nobody can count the scans, and nothing can switch them off.
uniqode.com · checked September 2026
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.
Why build with Lovable
Skip the design agency and the server engineering. Describe the signature you want your team to send, the layouts to choose from and where the photos should live, and the form, the live preview and the export take shape without you writing a line of HTML for a mail client.
Lovable turns that work into a conversation: describe a screen or a rule in plain language and watch it appear in the live preview, in the same tab:
Prompt
Say what you want to add or change, in plain language.
Watch
The live preview rebuilds in the browser as Lovable writes the code.
Try it
Click through the real app, with real buttons, forms and data rather than a mockup.
Refine
Select what’s off and describe the fix, or ask for what’s next.
None of that requires a computer science background or writing code, and the whole build happens in one browser tab, one request at a time.
Data & backendhandled automatically
Connect your database in a single step, right from the chat. Lovable builds the tables, sets up the logins, writes the server-side functions, and turns on live updates, each one an ordinary request in plain language, not a separate tool to learn.
Click to point instead of describing where
Select any element in the live preview with Lovable’s Select elements tool, and your next message applies to exactly that piece.
Full ownership and complete privacy
The app and the records in it are yours. Every change is saved automatically, and the repository Lovable syncs to GitHub is private on every plan, with no technical setup and not one Git command.
Pay a developer, or do it with AI
Building a custom email signature generator involves minimal infrastructure fees (free app hosting paired with a $25/month image storage plan to keep photos active), so your primary financial choice comes down to development. Below is a side-by-side cost and time comparison between hiring a developer and building the tool yourself using AI.
Hire a developer
Custom build, from scratch- Developer
- ~$7.3k-$29k
- Supabase (storage)
- Free tier · $25/mo (Pro plan)*
- Hosting
- $0 free tier
- Build time
- ~145 hrs of their work
~$7.3k-$29k for the build, then $25/mo once the images have to stay up
Our ~145-hour estimate, costed against the rate survey linked below, whose bands run from a $45-$75/hr global freelance average up through $100-$150+/hr for senior US developers, before the 20-40% an agency adds, which brackets the range at roughly $50/hr and $200/hr. Most of those hours go on HTML that has to survive three mail clients, six layouts that hold together with fields missing, and an export that matches the preview.
Build it with Lovable
From scratch, with Lovable- Lovable
- Free (30 credits/mo) to $25+/month (Pro, from 100 credits)
- Backend (Supabase)
- Free tier · $25/month (Pro plan)*
- Hosting
- $0 on a Lovable subdomain
- Your time
- ~69 hrs
Free to try the idea, ~$25-$50+/month on Pro while you build a real one, then whichever credit tier you keep using
Lovable bills by credits, so what you pay tracks what you build: importing the pre-built template can fit inside the Free plan’s 30 credits a month, while a full from-scratch build burns through Free fast and usually needs Pro. Pro’s entry rung is $25/month (or $250/year, roughly $21/month effective) for 100 credits, the bottom of a ladder where 200 credits runs $50/month (or $500/year, about $42/month), and a multi-session build often lands on that rung or higher rather than the entry price.
* 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 docs.lovable.dev, checked September 2026.
Decide before you build
Six decisions to make before writing code. Three of them are about things the template deliberately leaves out, and one is about a bucket that has to stay awake.
Do people sign in, or just use it?
As shipped, nobody signs in and nothing is saved: you make a signature, copy it and leave. The code and the database carry sign-in and a saved-signatures table that no screen uses. Decide whether a saved signature per person is worth an account, because connecting one also changes who is allowed to upload.
Who is allowed to upload an image?
Without sign-in, the rules let anyone who finds the address put an image under 5 MB into your bucket, and only an image. Fine behind a company login page, not fine on the open internet. Decide whether uploads sit behind sign-in, behind a host that asks for a password, or on a private network.
Where do the images live for the next three years?
A signature keeps loading its photo from wherever the HTML says, long after anyone opens the builder, and a free storage project pauses after a week idle. Decide now between the paid plan that never pauses, a bucket somewhere that never sleeps, or copying every image to your own website and pointing the HTML there.
Which mail clients have to be perfect?
The HTML looks right in Apple Mail and mostly right in Gmail. Outlook for Windows ignores the flex under Compact, and Gmail, Outlook and Yahoo strip the inline SVG icons. Decide which clients your recipients use, because the fix is hosted icon images and a table layout, and it is a step in the build.
Static QR codes, or dynamic ones you can change later?
The codes encode the address itself: free for as long as the address works, uncountable and unchangeable, so a printed card with a dead link stays dead. A dynamic code redirects through a service you pay to keep running. Decide whether you need to change destinations or count scans, and budget the subscription if so.
One brand, or a brand kit per client?
Six layouts, eight fonts and eight colours are one company’s options. An agency making signatures for clients wants a logo, a palette and a font per client, saved and reloaded. Decide whether the design step reads one brand or a list of them, because a saved brand is the first thing that needs an account.
Comparing your build options
Putting a form next to a preview is fast. The hard part is everything behind it: HTML that survives Gmail, Outlook and Apple Mail rewriting it, six layouts that hold together with fields missing, photos hosted at an address a stranger’s inbox can load, and a PNG that matches the preview. Here are three ways to build the exact same product.
A form with a preview beside it is an afternoon. The weeks go on what a recipient never sees: HTML that still looks right after Gmail, Outlook and Apple Mail have each rewritten it, six layouts that hold together when a field is empty, a photo that loads from an address rather than travelling as an attachment, and a PNG that matches the preview to the pixel.
A kit gives you a form, a sidebar and a colour picker. It has never heard of a mail client, a signature that has to survive a paste, or an image that must load from a public address, so the export, which is the whole product, starts from nothing.
You describe a screen or a rule and watch the running app change in the same tab, while Lovable creates the bucket and the upload behind it. The check that matters: copy the HTML out of the preview, paste it into your own mail client, and send yourself a message from a phone.
Estimate your exact build timeframe
Plenty of useful signature builders ship with less than this. One layout, no photo upload and no QR code is still a tool a whole team can use, and a shorter build than the figure below. Untick what you are leaving out, and read the total as our own estimate rather than a quote.
Your estimate
69 hrs
start to finish
Based on the 5 of 5 features you’ve selected, plus ~21h of groundwork. Toggle any on the left to watch the number move, and open the groundwork row to untick what you have already, such as a database that is already running or going live if you are only building a mock-up for now.
A rough estimate, not a quote. Real time depends on how much you customize and how clean your data is.
Let’s set up the tools you need
Nothing gets installed, because the whole workspace is a browser tab. Three things to sort out before step 01, and a fourth worth adding once the project matters to you. After that, you build by describing what you want.
Lovable account
Nothing to download. Sign up with an email, Google, or GitHub account and you land straight in the chat where you describe what to build.
Sign up for LovableLovable subscription
Lovable bills by build credits, so the plan you need follows what you build. Free gives you 5 credits a day, capped at 30 a month, which is enough to try it rather than to finish an app. Pro is $25/month for 100 credits ($250/year, about $21/month), and that is the bottom rung: a build spread over several sessions usually lands on 200 credits at $50/month, or higher.
Compare Lovable plansSupabase project
Where your app keeps its data. Connect your own Supabase project from the chat, or let Lovable create one for you. Either way it designs the tables, adds the logins, and wires the screens to them from there.
Connect Supabase to LovableGitHub connection
Not needed to build anything, since Lovable keeps its own history of every change. Link a GitHub account and it also keeps a private repository in sync, so a copy of the real code exists outside the browser tab. Worth doing before the project is one you would hate to lose.
Set up GitHub syncOnly the first three are needed to start, and none of it touches your computer. From here, you describe what you want and Lovable builds it in the browser.
Build your signature builder, message by message
Everything below happens in one browser tab. Send a message, watch the preview rebuild, click through what changed, then send the next. One thing about the order: the export comes after the image hosting, because HTML that links a photo cannot be tested until there is an address for it to link.
- 01
Set the ground rules, connect Supabase, and create the bucket
The rules that decide whether the export survives a mail client go in the first message, and the bucket goes in with them, because everything after this uploads to it.
PromptSet the rules, connect the backend, create the bucketBefore we build anything else, note the ground rules for this project: it is an email signature and QR code builder, the vocabulary throughout is signature, layout, design, social links, QR code and export, 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 this project to Supabase 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.
Say the export rules in the first message. Left unsaid, an assistant will reasonably build the preview with flex and inline icons, and both look perfect until somebody opens the message in Outlook.
- 02
Get the form and the live 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, with rows you can drag into a new order.
PromptBuild the form and the previewBuild 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 in the preview, then fill everything in. Both have to look deliberate. Select the element that is off and describe the fix rather than describing where it sits.
- 03
Bookmark, then ask for the six layouts and the design step
The same details six ways, plus eight system fonts and eight accent colours. Bookmark first, because this is the screen you will iterate on most.
PromptBuild the layouts and the design stepBookmark the current version first. Then 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.
Expect several follow-up messages on the layouts. Clear only a name into the form and click through all six before sending the next.
- 04
Host the images and add the QR tab
Photos and QR images uploaded to your bucket and linked by address, because a mail client shows only an image it can fetch. Then the second tab, which makes a code from any address.
PromptAdd uploads and the QR generatorIn 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.
Try a 6 MB photo and a text file in the preview. Both should be refused politely, and the refusal that counts is the bucket rule, which holds when somebody skips the screen.
- 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 PNGBuild 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.
- 06Destination
Decide about sign-in, lock the bucket, try it as a stranger, and publish
Accounts and saved signatures are optional and the bucket rule follows the decision. Then a private window, an upload that should fail, and publish from the same tab.
PromptAdd sign-in if wanted, harden, test, and publishTwo 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 to anyone 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. When it holds up, publish it.
Keeping your files safe & secure
Simple apps often leave storage security overlooked. Review these essential access rules, public permissions, and upload limits before launching your builder.
User accounts are built-in, but currently hidden
The underlying system already includes account creation and login features, but they aren’t shown on the screen yet. If you decide you need user accounts later, you can simply activate this ready-made login system instead of building one from scratch.
Images must be publicly viewable
Anyone receiving your email needs to see your photo and QR code, so these image files are intentionally visible to everyone. Do not store sensitive files (like contracts or private documents) in this storage folder, as anyone with the link can view them.
Anyone can upload photos (with safety limits)
Since there is no user login screen yet, anyone using the web page can upload a photo. To keep this safe, uploads are strictly restricted to image files only, capped at a maximum size of 5 MB, and isolated to this single folder.
Clear security rules protect your files
The app includes pre-written security rules that allow visitors to upload signature photos while locking down file types and sizes. Extra security rules are already prepared in the background code, ready to turn on as soon as user accounts are activated.
Email app compatibility fixes
Some email apps like Gmail or Outlook block complex graphics (like vector icons or modern web layouts), which can leave blank spaces in your signature. To ensure your signature looks right to every recipient, use standard image files (like PNGs) for social icons and test the result in Outlook.
Where your data goes (and stays private)
The personal details you type stay private inside your web browser and are never sent to external servers. The only things sent online are your uploaded photo and QR code so email recipients can view them.
Paid plans keep your signature images online
Free storage plans go to sleep after one week without activity, which breaks images in sent emails. Using a paid storage plan ensures your photos stay online continuously and gives you automatic daily backups of your database, though not of the photos themselves, so keep your own copy of those.
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.
Paste this into the chat before launch so Lovable checks nobody can see data they shouldn’t.
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.
What speeds the build, and what slows it
Speeds the build
- One small request per message, such as a field, a screen or a rule, rather than the whole app at once
- Connecting your database before building screens that need real data, not after
- Using Select elements to point at the exact thing that should change, instead of describing its location in words
- Bookmarking a known-good version before a redesign or a change to the data model
- Reading each response before sending the next request, so small mistakes don’t stack up
Slows the build
- Asking for an entire app in one message instead of one screen at a time
- Building screens for data your database does not hold yet
- Describing which button or section to change instead of selecting it
- Skipping bookmarks, then scrolling far back through history to undo a bad change
- Approving several messages in a row without previewing what actually changed
Connecting GitHub (Optional)
Every change in Lovable is saved automatically without any technical setup. You only need to link GitHub if you want a private copy under your own control or plan to hand the codebase over to external developers.
What Git actually is
A recorder for a project: every change becomes a version you can go back to, and nothing is ever overwritten. GitHub is the service that keeps those versions online.
Lovable already saves every change
A new version is created each time Lovable changes your project. No save button, no Git command, and the full history is there to scroll back through.
Version history, Lovable docsReverting undoes the code, not your data
One click restores an earlier version of your code and redeploys it, but nothing already written to your database rolls back with it. A UI or logic change is safe to undo. A change that touched real records is not.
Bookmark before a big change
Before a redesign or a change to your data model, bookmark the version you are on: one click back instead of a long scroll through history.
Connecting it, if you want to
Open your project settings, pick GitHub, and authorise the account. Lovable creates a private repository and keeps it in sync both ways: changes in Lovable reach GitHub, and anything pushed to that branch comes back in. Free on every plan.
GitHub integration, Lovable docsIt’s also how you leave, if you ever want to
The synced repository is a standard Vite and React project: clone it, hand it to a developer, or deploy it yourself.
Deployment, hosting, and ownership, Lovable docsWhere to host your application
Hosting gives your app a home on the internet so anyone can open it via a web link. Choose a service below to make your site live. (Your photos and QR images are stored separately in Supabase, covered below, and every signature you export keeps loading them from there).
| Host | Best for | Notes | Free tier |
|---|---|---|---|
| LovableBuilt in | Publishing from the chat | The project you have been previewing publishes itself, with nothing to configure and no account to open anywhere else. Free on any plan at a lovable.app address. Paid plans put it on your own domain: buy one through Lovable and the DNS is done for you, or point one you already own at it using the two records the setup screen shows. Certificate issued automatically either way. | Free on a lovable.app subdomain · own domain on paid plans |
One button, and the app you have been previewing is live.
Hosting it somewhere else
Only for a setup Lovable does not offer: a host you already pay for, or the exported code on your own account. None of it is needed to go live.
| Host | Best for | Notes | Free tier |
|---|---|---|---|
| Vercel | One-click deploys | Connect the repository and every push deploys itself. The template already carries the routing file Vercel looks for, so a refresh on the editor never lands on a not-found page. Hobby is for personal use only, and a company rolling this out to its staff is a business, so Pro at $20/user/mo is the plan. | Pro from $20/user/mo (Hobby is non-commercial) |
| Netlify | Drag-and-drop or Git | Drag the built folder onto the page or link the repository, and it is live within a minute. Accept the redirect rule Netlify offers so the address still opens the builder after a refresh, and note that nothing about a signature passes through the host: the HTML is made in the browser and the images come from your bucket. | Free tier |
| Cloudflare Pages | A team spread across countries | Serves the small static folder from wherever the person opening it happens to be. Worth more here than usual if the people making signatures sit in several offices, and irrelevant to recipients, who never load the app at all, only the two images from your bucket. | Generous free tier |
| GitHub Pages | Not this app | Free from a GitHub project, and listed so you can cross it off: the free tier wants a public repository, and the environment file naming your storage project would sit in it, handing anyone the address of a bucket that already accepts uploads from anyone. | Free from a public repo only |
| Firebase Hosting | Teams already on Google | A short setup and one command per release, with the rewrite declared in its own config file. A company on Google Workspace that wants its signatures to match is often already here, and the builder is one more small site on an account it has. | Free Spark tier |
| AWS Amplify Hosting | Teams already on AWS | Publishes from the console and needs the rewrite rule in place before a refresh works. Only worth it where the other bills already come from AWS, because the folder is tiny and indifferent to where it is served from. | Free tier (build + hosting) |
| Surge | Publish from the terminal | One command puts the folder online with no repository involved, which is fine for showing a colleague the six layouts before you commit to a host, and wrong for the address a whole company bookmarks. | Free, unlimited publishing |
| DigitalOcean App Platform | DigitalOcean users | Builds and serves the static folder from an account a business may already pay for, so the app and the bucket sit with two suppliers rather than three. | Free: 3 static sites, 1 GB/mo transfer |
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.
A signature builder goes quiet the moment the team has pasted theirs, and a quiet free project pauses after a week. Supabase pauses a free project after seven days without activity, and a paused project serves nothing, so every photo and QR code in every signature already sent turns into a broken image at once, in other people’s inboxes, where nobody on your team will see it. Before the first colleague pastes a signature, move the storage project to a plan that never pauses, or host the images on your own website and point the HTML there. Then send yourself an email from a phone and check the photo loads.
Keep your images in Supabase
One public bucket for the photos and QR images every signature loads, two tables and an authentication service that are wired in the database and waiting for the screens, and no server-side function at all.
| Service | Best for | Notes | Free tier |
|---|---|---|---|
| Supabase | The bucket, and accounts when you want them | A storage bucket called signature-images, public to read and constrained to images under 5 MB, is the whole backend the shipped app uses. Beside it sit a profiles table, a signatures table and owner-only rules on both, ready for the day sign-in is connected. Create a free project, hand over its URL and publishable key, push the four migrations, and it is connected. The line to watch is the pause: a free project sleeps after a week without activity, and a sleeping bucket serves no images, so the paid plan is the one a team relies on. | Free tier, then $25/mo (Pro) so the bucket never pauses |
Add AI capabilities in one simple step
Securely connect AI features with safety controls and usage limits to protect your account. Once enabled, simple prompts let you auto-fill details from a bio, match brand colors from your logo, check email client compatibility, and instantly create matching signatures for your entire team.
Build the one function every feature goes through
The template calls no model, which means there is nothing to protect yet. Build the function before any feature below, with the key in its secrets, a log of every call and a ceiling, so the first feature inherits all three.
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.
Fill the form from a pasted bio or an old signature
Most people already have their details somewhere: an old signature, a profile summary, a staff page. Let a model sort a pasted block of text into the fields and leave you as the one who presses done.
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.
Suggest a font and accent colour from the logo
The design step offers eight fonts and eight colours. A model that has seen the logo can suggest which pairing sits closest to the brand, and say why, which is faster than trying all sixty-four.
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.
Check the export against real mail clients
The export can look perfect here and lose its icons in Gmail. A model that reads the generated HTML against a checklist of what each client removes turns a guess into a short list of fixes.
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.
Turn one signature into a set for the team
A team signature is one design and thirty sets of details. Paste a list of names, titles and phones, let a model map the columns, then generate the HTML for each person as a bundle you can hand out.
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.
You bring no key and pick no provider: Lovable manages an API key per project, and if you do not name a model it chooses one from what you describe. Match the model to the job: fast and cheap for anything that runs on every record, stronger only where the reasoning matters. Send every feature above through that one integration.
Get a head start with our template
None of the steps above is compulsory, because the same app already exists, built: the form, the six layouts, the live preview, the HTML and PNG export, the hosted images and the QR tab. Your time goes on your colours, your fonts, and the two export fixes the security section names.
Signature & QR Builder
The exact signature builder this guide builds, packaged so you can open it, point it at your own backend, and make it yours from there. A builder that turns your details into a polished email signature and matching QR code. Fill in the form, pick from six templates, watch it update live, then copy out clean HTML you can paste into your mail client or download it as a PNG file.
The key benefits of starting with a template
Save dozens of hours with a fully functional signature builder. Form fields, responsive layouts, live preview, cloud storage, and exports are pre-configured and ready to deploy.
Building the core from scratch
~69 hrs
Opening the template, already built
~1 hr
Pay Once, Own Forever. Build exactly what your team needs without renting a monthly SaaS subscription, paying per-seat fees, or dealing with platform lock-in.
Six ready-to-use layouts with live preview
Choose from Modern, Classic, Minimal, Professional, Creative, and Compact designs. Each template cleanly adapts if a photo, phone number, or job title is missing. Next to the form, a realistic email preview updates in real time as you type and allows drag-and-drop section reordering.
Two built-in export options
Easily copy clean HTML code with styled text and web-linked images, or download a sharp, high-resolution PNG image directly from the preview. If your team relies on picky email apps like Outlook, simple tweaks for social icons and layout tables are available as explained in the security guide.
Image storage ready out of the box
Profile photos and QR codes are automatically checked, uploaded to a public storage folder capped at 5 MB for image files, and linked directly into your HTML. All storage settings and rules are pre-packaged in the code, making project setup quick and straightforward.
User sign-in and saved signatures pre-built
The codebase includes a login interface, profile database tables, and user access rules behind the scenes. None of these features are shown on screen yet, but you can activate accounts and connect individual storage permissions whenever you are ready.
A standalone QR code generator
The second tab creates high-quality QR codes directly inside your web browser and lets you download them as PNG files, with SVG as a fallback. It requires no user accounts, external link redirects, or usage limits, meaning printed codes remain permanent and static.
From founders who build on our templates
We launched our own team signature builder in under an hour instead of spending weeks on custom code. No per-seat subscription fees, total control over our data, and a clean HTML export that just works.
Jeevan ThomasFounder & CEO, Hado.aiCommon questions
It does. A photo or logo you upload and the QR code drawn for a signature go into a public storage bucket in your own Supabase project, and the HTML links them by address. That is the difference between this and the free generators, which ask you to host the image first, and it is also why the project has to stay awake: a paused bucket serves nothing.
Mostly, with two known exceptions the security section names. The social icons are drawn as inline SVG, which Gmail, Outlook and Yahoo strip, and the Compact layout uses flex, which Outlook for Windows ignores. Every other layout is plain inline-styled HTML with system fonts and hosted images. Replace the icons with small hosted PNGs and rebuild Compact as a table before a team relies on it.
Not as shipped. Sign-in and a saved-signatures table exist in the code and the database, but no screen uses them: you fill in the form, copy the HTML and leave. Connecting them is the first decision above, and doing it also lets you tighten the bucket so only signed-in people can upload.
Anyone who can reach the app, for now. Because nobody signs in, the rules allow anonymous uploads scoped to this one bucket, capped at 5 MB and limited to image types. Put the builder behind your company login page or a host with a password, or connect sign-in and switch to the per-user rules the template ships in a comment.
Neither. The code encodes the address exactly as you typed it, so it works for as long as the address does, and nobody, including you, can count the scans or change the destination later. A dynamic code that can do both is a redirect through a paid service, and the fifth decision above is where to weigh that.
A host, free on every plan above, and a storage plan. Supabase Free gives 1 GB of file storage and a monthly egress allowance that a team’s signature photos will not trouble, but it pauses after a week without activity, and a paused project serves no images. Pro at $25/mo never pauses, which is the whole reason to pay it here.
Yes. A layout is a name in the list plus the HTML it generates for the export and the preview, and your AI coding tool adds one from a description or a screenshot of a signature you like. Keep it to inline styles, system fonts, hosted images and tables rather than flex, because the mail clients decide what survives, not the browser.
Only for a client that refuses HTML. The PNG is a picture of the preview at double resolution, so nothing in it is clickable, and some mail clients show it as an attachment rather than a signature. Paste the HTML wherever you can and keep the PNG for the one client that cannot take it.
No. Say that photos and QR images go into a public bucket limited to images under 5 MB, and your AI coding tool writes the bucket, its rules and the upload code. What is left for you is a free Supabase project for it to point at, so the images end up somewhere you own.
Nothing beyond drawing the signature. The HTML is generated in the browser and copied to your clipboard, and no server sees your name, phone or links. The photo and the QR image are the only two things that leave the tab, into your own bucket, and the QR image encodes the address you typed.
Nothing here locks you in. Every signature is HTML on your clipboard or a PNG on your disk the moment you export it, the images are ordinary files in a bucket you can download in bulk, and the two tables are plain PostgreSQL if you ever connect them.
Yes. Any host above puts the builder on a domain you own with the certificate handled, in a few clicks. The address matters less than usual here, because recipients never see the builder, only the images inside the signature, and those come from your storage project’s address whatever domain the app itself lives on.
No. Everything happens in a browser tab: you describe what you want in the chat, and Lovable writes and previews the code. The setup section above covers the handful of things you connect first: an account, a plan, and your own Supabase project.
A sketch on the Free plan is fine for testing an idea, with no real backend behind it. A project connected to your own Supabase account is the one you can actually launch, with real logins, real data, and your own domain.
Build credits reset every day (Free) or on your billing cycle (paid plans). If you run out mid-session, the app you’ve built stays exactly as it is. You either wait for the reset or move up a credit tier to keep going right away.
References
Sources checked September 2026- 01Free Email Signature Generator (no account, images by URL), HubSpot. hubspot.com
- 02Pricing (Basic, Grow, Platform, Pro+), WiseStamp. wisestamp.com
- 03Pricing (Starter, Standard, Pro, ten-user minimum), Exclaimer. exclaimer.com
- 04Pricing (per signature, subscription FAQ), Newoldstamp. newoldstamp.com
- 05Pricing (static vs dynamic QR codes, inactive accounts), Uniqode. uniqode.com
- 06Embedded SVG image support by mail client, Can I email. caniemail.com
- 07display:flex support by mail client, Can I email. caniemail.com
- 08Pricing (Free storage and egress, pause, Pro plan), Supabase. supabase.com
- 09Storage access control (bucket policies), Supabase docs. supabase.com
- 10Backups (daily backups exclude Storage objects), Supabase docs. supabase.com
- 11Web developer hourly rates 2026 (freelance and agency benchmarks). developex.com
- 12Sign up, Lovable. lovable.dev
- 13Subscription plans (Free, Pro, Business), Lovable docs. docs.lovable.dev
- 14Connect Supabase, Lovable docs. docs.lovable.dev
- 15GitHub integration, Lovable docs. docs.lovable.dev
- 16Deployment, hosting, and ownership, Lovable docs. docs.lovable.dev
- 17Version history and reverting, Lovable docs. docs.lovable.dev
- 18Preview toolbar (Select elements), Lovable docs. docs.lovable.dev
- 19AI features and model selection, Lovable docs. docs.lovable.dev
- 20Custom domains, Lovable docs. docs.lovable.dev
This guide is general information. Third-party prices, plan limits, mail-client support tables and market rates are quoted from the sources above and were last checked on the date shown. Vendors change them without notice, so confirm before you budget. Build hours and the cost estimates derived from them are our own estimates, not quotes. Lovable is a product of Lovable Labs. Verify current capabilities and pricing before relying on them.