How to build a PDF signature tool with Replit

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 and replit.com, checked August 2026.

Nothing here takes long. An account and a plan, and the workspace has everything else, hosting included. The third card is a folder you already have.

1. 01

   Start the workspace and set the rule

   A running project 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 18 and TypeScript project with Tailwind, a library that renders PDF pages to the screen, and a library that writes into an existing PDF file. Do not add a database and do not add a server: this tool has no accounts, nothing to store, and no environment variables, and it must stay that way. 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 no to the database explicitly. It is offered readily and helpfully here, and on this build accepting it is the one decision that would cost you money for nothing.

2. 02

   Open a real document and show it

   A file taken in and rendered legibly in the workspace preview, with zoom and page navigation. Use the awkward documents from the setup section rather than a one-page sample, because 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. What the Agent reports about large files is what step 06 has to deal with.

3. 03

   Draw the signature

   A canvas that follows a mouse and follows a finger better. Open the preview address 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. Then tell me how to open this preview on my own phone.

   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 worth its own Agent session. 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

   Take a checkpoint first, then do this in one session. 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.

   The checkpoint is the point of that first sentence. This is the change most likely to need a second attempt, and rolling back to a checkpoint makes the first one free.

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 and no server route. 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 publishes from the same workspace. 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, and it is also what lets you publish as Static.

   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 as a Static deployment, since nothing in it runs on a server, and tell me what that does and does not allow. Then tell me what to check on the published address rather than in the workspace preview: open it with the browser network panel recording, sign a document, and confirm every request goes to my own files. Walk me through putting my own domain on it, and 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.

All four are Replit rather than a third party, so the choice is shape rather than vendor, and unusually, this build wants the simplest of them. Check who the tool is visible to before the first release, since Publishing is what sets that.

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.

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