Build with AI

How to build an email signature generator with v0

Turn simple language prompts into a fully functional app. Just describe what you need (interactive forms, live previews, 6 custom layouts, and cloud image hosting) and v0 builds a complete email signature generator with bulletproof HTML exports.

September 2026 · 47 min read · Updated September 2026

v0

$ Build the screens for an email signature and QR code builder (a five-step form beside a live preview inside a mock inbox, six layouts, a design step and a QR tab), then wire in a storage bucket for photos and QR images, and Copy HTML and Download PNG exports that survive a mail client.

Form and preview generated first
Storage and export added next
Ready to preview

You describe it, v0 builds it

Start here

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.

What you are building

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.

Build vs buy

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 · Uniqode

Renting 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

HubSpot Email Signature Generator"Free", with "No account required", "No hidden costs or registration required" and "12 professional email signature templates". A logo has to be uploaded first to "any image host that provides a direct URL"

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

WiseStampBasic at $19 a month, Grow at $49 and Platform at $189, each "+ $1 /mo per employee" and "Billed annually", with Pro+ "For individuals & micro-teams" from "$9 / mo" and "up to 10 team members, for $2/mo each"

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

ExclaimerStarter at "$0.90", Standard at "$1.45" and Pro at "$1.75", each "User / month, billed annually", with licensing "based on the number of active mailboxes" and "The minimum user count for Exclaimer is ten users."

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

NewoldstampA slider from "min 1" to "200+" signatures at "$ 1.8" "per signature / per month", "billed annually", and in the FAQ: "Your email signature will remain functional as long as your subscription is valid. But it will stop working as soon as your subscription expires or when you delete your account."

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

UniqodeStatic codes free, dynamic codes "for as low as $9/month" and a "Core plan, at $49/month", with "the scan limits are reset annually" and, on cancelling, "For your QR Codes to work, the account linked to them has to stay active."

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.

No dev needed

Why build with v0

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.

v0 starts with the screens, and the backend comes when you ask for it: here that is a storage bucket for the photos and the routes that upload to it, usually once the preview already exists and there is a photo to host:

The build loop

Sketch

Describe the screen or component you want.

Preview

See it rendered live, and select any part of it to adjust directly.

Connect

Add a database and the routes that read and write to it, once the UI needs somewhere real to save.

Iterate

Prompt again for the next screen or the next piece of logic.

Loop back to Describe

The order matters here more than with a full-app builder: v0 gets you a finished-looking interface fast, and the data underneath doesn’t show up until you ask for it and give it somewhere to live.

One clickconnects a database

Supabase, Neon, and Upstash are integrations you add from the project menu once a screen needs to hold onto something real, and v0 provisions the credentials and writes the routes that use them.

Live preview is the feedback loop

Every prompt updates the working interface right there in the chat, so you see the actual screen changing instead of imagining it from a description.

Design mode edits without a prompt

Select an element in the live preview, adjust its style directly or type a plain-language instruction, and v0 applies the change back to the real source code as a new version.

What it costs

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 v0

From scratch, with v0

v0: $0 ($5/mo of credits) to $30+/month (Plus)
Backend (Supabase): Free tier · $25/month (Pro plan)*
Hosting (Vercel): Free on Vercel’s Hobby plan
Your time: ~69 hrs

Free to try the idea, ~$30+/month on Plus while you build a real one, then whichever plan you keep using

v0 bills in dollars of credit rather than a flat fee, so cost tracks usage: importing the pre-built template can fit inside Free’s $5 a month, while a from-scratch build runs into Free’s 7-messages-a-day cap quickly and usually needs Plus, at $30 per user per month with no annual discount shown. Because v0 generates the interface and the backend as separate steps rather than one pass, expect more prompts to reach the same result than a tool that writes both together.

* 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, v0.app, v0.app and vercel.com, checked September 2026.

Plan first

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.

Approaches

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.

~145 hrsBuilding by hand

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.

~105 hrsGeneric UI starter kit

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.

~69 hrsAI-powered development with v0

You describe the form and the preview in plain words and they appear in a live preview, then the bucket, the upload and the export are a second, deliberate ask. The check that matters: copy the HTML, paste it into a mail client, and send yourself a message from a phone.

Interactive calculator

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.

What your signature builder needs

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.

Setting up your workspace

Let’s set up the tools you need

v0 runs entirely in the browser too, so there’s no download and no terminal. Before step 01: sign up, pick a plan, and know that a database is one click away once a screen actually needs to save something. GitHub is the last piece, and it’s what turns the chat into a project you can hand to someone else.

v0 account

Free

Sign in with a GitHub, Google, or email account and you land in a chat where you describe the interface you want. There’s nothing to install.

v0 subscription

Free ($5/month of credits), then $30/month (Plus)

Free includes $5 of credits a month, capped at 7 messages a day, which is fine for trying a few screens and thin for a real build. Plus is $30 per user per month, billed monthly only (v0’s pricing page shows no annual option), and it’s the realistic floor once you’re iterating past a handful of screens.

Compare v0 plans

Database (Supabase, Neon or Upstash)

Free to start

Where your project keeps its data, added when a screen needs one. v0 generates the interface first. A database is a one-click integration you add from the project menu once a screen needs somewhere real to save to, with Supabase, Neon and Upstash as the options, and connecting one lets v0 write the routes that use it.

Connect a database in v0

Optional

GitHub connection

Free

Not needed to build anything, since v0 keeps its own history of every change. Connect a repository from the chat’s Git panel and v0 also commits every code-changing message to its own branch, ready to merge as a pull request. That is the step that turns the chat into a project other tools, and other people, can use.

Connect v0 to GitHub

The database step is the one worth not skipping once your screens need real data. Everything else here takes a couple of minutes, and after that you’re just describing what you want.

Step by step

Build your signature builder, one chat at a time

v0 generates the interface first and the rest when you ask, which suits this template well: the form and the preview are exactly the kind of screens worth having in front of you early, because you can judge them by eye. Keep one feature to one chat so its history stays a line you can follow.

Generate the form and the preview before anything else exists

Start with the screen you will live in. A placeholder photo is fine, and finding out that the preview belongs on the right rather than below costs nothing now.

PromptSketch the form and the preview

Build the screens for an email signature and QR code builder as a single page with two tabs, Signature Generator and QR Code Generator. In the first, a five-step sidebar (Details, Images, Social, Template, Design) 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 and let me drag the rows into a new order. Add a Done Editing view with Copy HTML, Download PNG and Delete Draft buttons. Use a placeholder photo for now. I will add real storage next.

Placeholder photo, yes. Placeholder layout rules, no: ask for tables and inline styles in the preview even now, because a preview built with flex becomes an export built with flex.

Start a new chat for 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, which is easier to judge in a live preview than anywhere else.

PromptBuild the layouts and the design step

In this chat, 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.

For spacing and alignment fixes on the six cards, select the element in the preview and use Design mode rather than describing where it sits. It is faster and it changes the real code.

Start a new chat to connect storage and host the images

This is the step that turns a mock-up into a builder somebody can use, because a mail client shows only an image it can fetch. The bucket and the upload go in together.

PromptConnect Supabase and add uploads

In this chat, connect a Supabase project and create one public storage bucket called signature-images, readable by anyone, limited to image types and 5 MB per file. In the Images step, add a photo or logo upload that checks the file is an image under 5 MB, uploads it to the 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. Make the preview show the real hosted photo.

Ask for the bucket rule alongside the upload. A size check in the screen is skipped by anyone who talks to the bucket directly, and the rule on the bucket is what holds.

Build the QR tab in its own chat

A second tool that shares nothing with the first but its shell. One address in, a static code out, downloaded as a PNG.

PromptBuild the QR generator

In a new chat, 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, falling back to SVG if the browser cannot rasterise it. Encode the address exactly as typed, add no redirect and no tracking, and keep it entirely in the browser with nothing uploaded.

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 PNG

In a new chat, 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.

Be explicit about tables and hosted icons. v0 will otherwise reasonably reuse the preview’s own markup, and the preview is allowed things a mail client is not.

Destination

Decide about sign-in, lock the bucket, test as a stranger, then open a pull request

Accounts and saved signatures are optional and the bucket rule follows the decision. Then a private window, an upload that should fail, and a merge, which, if that branch is the linked Vercel project’s production branch, also deploys it.

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

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, and tell me how to put Vercel’s protection in front of the whole deployment. Either way, help me walk the app 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. Tell me which Supabase plan keeps the bucket awake when nobody opens the builder for a week. Once it holds up, publish and open a pull request for it.

Authentication & security

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.

PromptCheck who can see what

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 v0 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.

Workflow rules

What speeds the build, and what slows it

Speeds the build

One screen per message, checked in the live preview before you ask for the next one
Adding a database as soon as a screen needs to remember something, so v0 wires it up as it builds
Clicking the thing you want changed in Design mode, rather than describing where it sits
One feature per chat, so its history reads as a straight line you can walk back
Sending a finished chat over to GitHub before starting the next feature, rather than stacking several together

Slows the build

Asking for the whole app in one message instead of one screen at a time
Building screens for data the database does not hold yet
Describing which button to change when you could just click it
Letting one chat run for weeks, so going back to an older version undoes everything built after it
Approving several messages in a row without looking at the preview after each one

Getting code out of the chat

Connecting GitHub (Optional)

Every change in v0 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.

Every message is a version

Each time a message changes your code, v0 saves it as a new version. Restoring an older one adds it back as the newest version instead of branching, so the history stays one straight line.

Versions, v0 docs

Undo from the chat itself

Scroll back through the conversation and click the revert arrow on any earlier reply, or open the version number in the top right to jump straight to a specific one.

Connecting GitHub creates a real repository

From the chat’s Git panel, connect an existing repository or create one. v0 never writes straight to your main branch: every code-changing message is committed to its own working branch first.

GitHub integration, v0 docs

A pull request is how it gets merged

When you’re ready, publish and open a pull request from that working branch into your base branch, review it like any other, and merge it. Starting a new chat picks up a fresh branch for the next round of changes.

This can also be v0’s deploy path

If the branch your pull requests merge into is also the linked Vercel project’s production branch, merging one triggers a production deployment. If it isn’t, the merge just follows whatever branch behavior that Vercel project is already configured with.

GitHub integration, v0 docs

Going live

Where 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
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.

Database & backend

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

AI workflows

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.

PromptBuild the one function every feature goes through

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.

PromptFill the form from a pasted bio or an old signature

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.

PromptSuggest a font and accent colour from the logo

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.

PromptCheck the export against real mail clients

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.

PromptTurn one signature into a set for the team

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.

v0 doesn’t ship its own model for these prompts, so you bring an API key for whichever provider you want, and v0 writes the route that calls it. Start with a cheap model while you’re still iterating on the prompt itself, then swap in a stronger one for the version that ships, and keep every AI feature behind that one route so there’s only one key to rotate.

Ready-made option

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.

React 18ViteTypeScriptTailwind CSSSupabase

Get template - $39 Open live demo

Out of the box

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.

Customer story

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.ai

Got questions?

Common 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. You describe the screen you want in the chat and v0 generates the React and Next.js code behind it. Sign up, pick a plan, and connect a database once your screens need real data. The setup section above walks through each one.

Both, but not automatically at the same time. v0 generates the interface first. The backend (a database and the API routes that use it) is something you ask for once a screen actually needs to save or load real data.

Free plan credits reset monthly, and the 7-messages-a-day cap resets every day. If you hit either limit mid-build, what you’ve already built stays put. You wait for the reset or move up to Plus 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
12v0 homepage. v0.app
13Pricing (Plus, Business), v0. v0.app
14Pricing details (Free tier, credit rollover), v0 docs. v0.app
15Databases (connecting Supabase and others), v0 docs. v0.app
16Full-stack apps, v0 docs. v0.app
17GitHub integration, v0 docs. v0.app
18Deployments, v0 docs. v0.app
19Design mode, v0 docs. v0.app
20Versions, v0 docs. v0.app
21Pricing (Hobby plan), Vercel. vercel.com

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. v0 is a product of Vercel. Verify current capabilities and pricing before relying on them.