DEV3 Free Signature Maker — Source Code (React + Tailwind)

Source code of the DEV3 Signature Maker, a signature maker with pointer drawing (smoothed, speed-sensitive strokes) or typed handwriting fonts, exporting transparent PNG and SVG.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/signature-maker shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Quadratic-curve smoothing with velocity-based pen width
• True vector SVG export of drawn strokes
• Typed mode with ten Google Fonts and SVG font embedding
• 3x PNG export cropped to the ink

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, jszip.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• Typed SVG export fetches the font from Google Fonts at export time; offline it falls back to plain text.