How to build a PDF signature tool with v0

Split it by document rather than by product. Anything you sign yourself, and anything you would rather not hand to a company at all, belongs in a signer you own. Anything where you may later need to prove who signed and that nobody altered it afterwards belongs on a platform, and those are the documents worth paying for.

Either way the tool is yours and nothing about it is counted: not documents, not signatures, not the number of people who use it. This build also connects to no outside service at all, so there is no storage bill, no mail provider and no key to keep anywhere. The one exception is that adding an AI feature means paying a model provider for the text you send it, and only then.

Prices and rates from developex.com, v0.app, v0.app and vercel.com, checked August 2026.

Nothing here takes long. An account, a plan, and a GitHub connection whenever you want the code somewhere of your own. Everything else happens in the chat.

1. 01

   Start the chat and set the rule

   A running screen with the two libraries that read and write PDF files in it, and one instruction that governs everything after: nothing gets uploaded.

   PromptSet up the projectCopy

   Start a React and TypeScript project with Tailwind, a library that renders PDF pages to the screen, and a library that writes into an existing PDF file. This tool has no database, no accounts, no environment variables and no server route, and must not acquire any. One rule for the whole project: no file the user opens may ever be sent anywhere. If something I ask for later would need a network call, tell me before you write it rather than adding it quietly.

   Say the rule at the start. It is the claim the tool makes, and the easiest thing to lose three messages later.

2. 02

   Open a real document and show it

   A file taken in and rendered legibly in the preview, with zoom and page navigation. Use the awkward documents from the setup section rather than a one-page sample: this step looks finished on one page and is not.

   PromptBuild the viewerCopy

   Build the screen: a drop zone that also opens a file picker and takes one PDF at a time. Check the file really is a PDF rather than trusting its name, and show a clear message when it is not. Render its pages one under another at a readable width, with zoom between roughly half and double size, a page count, and a way to jump to a page. Read the file locally and make no request carrying its contents. Then tell me what happens today with a fifty page document, before changing anything about it.

   Drop a real fifty page document into the preview. Design mode is for the toolbar around it, and this part is not something you can see by looking.

3. 03

   Draw the signature

   A canvas that follows a mouse and follows a finger better. Open the preview on your phone for this step, because the desktop version passes while the phone version does not.

   PromptBuild the signature canvasCopy

   Add a signature pad: a canvas I can draw on with a mouse, a trackpad or a finger, using pointer events so all three behave the same. Undo the last ten strokes one at a time, and a clear button. Stop the page scrolling while a finger is drawing, size the canvas to the device pixel density so the line is not soft on a phone, and produce a transparent PNG. Keep the pad itself simple enough that I can restyle it in Design mode without breaking the drawing.

   Transparent matters. A signature on a white rectangle covers whatever sits under it, and you find out when it lands across a line of text.

4. 04

   Place it, and get the coordinates right

   The step this build turns on, and the one Design mode cannot touch. Dragging the signature onto the page is the visible half. The other half is that where you dropped it and where it gets written use different units measured from opposite corners.

   PromptPlace the signature, then fix the mathsCopy

   Let me drag the signature onto any rendered page, keep it inside that page, remember which page it landed on, and allow more than one per document. Then the part that decides whether this tool works: what I drop is in screen pixels at the current zoom, measured from the top left, and a PDF is written in points, seventy-two to the inch, measured from the bottom left. Derive the conversion from each page’s rendered pixel size against its real point size, divide the zoom back out, and put it in one function both the preview and the export call. Then explain that conversion to me in plain words.

   Start a fresh chat for this one. It is the change most likely to need several attempts, and you want its history to read as a straight line.

5. 05

   Write the signed file

   Everything above exists to produce one file. Download it from the preview and open it in a reader you did not build, because the preview shares its assumptions with the code that would have got it wrong.

   PromptExport itCopy

   Add the export: embed each placed signature into the original PDF at the position and size that shared conversion function returns, and download the result under a sensible name, with a way to download the untouched original too. All in the browser, with no upload. Then give me a check I can repeat: sign the same spot on a landscape page, a scanned page, and a page at double zoom, and show me the point coordinates written for each so I can compare them with where I dropped it.

   Open all three in a desktop reader and on a phone. Right in the preview and wrong in a real reader is a genuine failure here.

6. 06
   Destination

   Keep the work, then publish

   Two changes left, then it goes to Vercel. The first stops a refresh throwing away somebody’s work. The second stops the tool needing a third party’s file to display a document at all.

   PromptSurvive a refresh, and go offlineCopy

   Two changes. First, keep the opened document and the drawn signature across a page refresh, with a clear button that removes both deliberately, and handle a file too large for the browser store by telling me rather than failing quietly. Tell me what the real ceiling is. Second, copy the renderer’s worker file into the project and point the code at it instead of the public address it uses now, so the tool works with no network at all, and confirm the version matches.

   The second change is what makes this work on a locked-down work laptop, which for some of the people who want this tool is the only laptop there is.

   PromptPublish itCopy

   Publish this to Vercel, and tell me whether to do it straight from the chat or through a GitHub pull request given that I want to keep changing it. Then tell me what to check on the published address rather than in the preview: open it with the browser network panel recording, sign a document, and confirm every request goes to my own files. Finish with what to improve next in priority order and which one you would do first.

   The network panel check on the published address is the whole promise of this tool, and it takes about a minute.

Read this project the way somebody sceptical of its privacy claim would. List every network request the finished page makes, including anything a library fetches while loading, and say for each one what it sends. Then list everywhere the opened document and the drawn signature are held while the page is open, how long each of those survives, and what clears them. Finally, list every value in the project that ends up readable in the built files and should not be.

One rule outranks the rest: nothing in this project is private, because a static site hands every file it was built from to whoever opens the page. A value that has to stay secret belongs behind a function on a server rather than in the code.

Any of these will serve it. Two things to check rather than assume: whether the free tier allows commercial use, and how the host lets you set response headers, because a content security policy is the one piece of configuration this build genuinely benefits from.

Add one serverless function to this project, the smallest kind my host supports, and nothing else. It should take a short piece of text, pass it to an AI provider using a key read from the host’s own environment settings, and return the answer. That key must never appear in anything the browser downloads, and the function must never receive a whole document, only text I have chosen to send it. Show me where to paste the key in my host’s dashboard rather than anywhere in the project. Then add a line in the interface, visible before the first send, naming exactly which actions move document text off this machine.

Turn on text extraction in the PDF viewer so the page can read the words on each page, then add a "Summarise this document" action that sends the extracted text through the ai function and shows what comes back above the document: the parties, the dates, the amounts, the notice period, and anything that looks unusual, each with the page it came from. Warn the reader before the first send that this action uploads the document text, and make it a choice rather than something that happens the moment a file opens.

Using the extracted text, add an action that finds the likely signature locations in the document (signature lines, initials boxes, date fields, anything introduced by wording like "signed by" or "authorised signatory") and returns a list of page numbers with a short description of each. Show it as a jump list beside the document. Say plainly in the interface that it is a suggestion rather than a guarantee, and never place a signature automatically on the strength of it.

Let me select a region of the page and send only the text inside that selection through the ai function, asking for the same clause in plain language plus one line on what it would mean for the person signing. Show the original and the rewrite side by side, make clear on screen that it is not legal advice, and send nothing at all beyond the selected text.

Improve the signature canvas without adding any network calls at all. Smooth the drawn path as it is captured so a stroke made with a mouse or a trackpad reads as a pen line rather than a series of straight segments, let the line weight respond to speed, and render at the device’s own pixel density so it is not soft on a high-resolution screen. Keep every part of it local: no library that phones home, and no request of any kind.

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.