DEV3 Free Wireframe Sketcher — Source Code (React + Tailwind)

Source code of the DEV3 Wireframe Sketcher, a multi-page UI wireframe sketcher on a custom SVG canvas with a library of low-fidelity components, grid snapping, layering, and PNG, multi-page PDF and JSON export.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/wireframe-sketcher 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

• Eighteen components: navbar, tabs, heading, text, image, card, list, table, button, input, dropdown, checkbox, radio, toggle, phone and browser frames and more
• Multiple pages with add, rename, delete and switch, all covered by undo/redo
• Snap-to-grid move and resize, layer ordering, copy, paste and duplicate, numeric position and size fields
• PNG of the current page and an A4 PDF with one page per wireframe page (jsPDF, loaded on demand)
• Two-page sample (landing page and phone login) and validated JSON import and export

Tech stack

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

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.
• Low-fidelity only: components are grey-box placeholders, not live HTML.
• The PDF embeds each page as an image, so text in it is not selectable.