DEV3 Free Restaurant Menu Card Designer — Source Code (React + Tailwind)

Source code of the DEV3 Restaurant Menu Card Designer, a printed menu designer: sections, items and dietary icons are laid out for A4, A5, tri-fold or table tent, previewed at page scale as SVG, and written to a vector PDF with jsPDF.

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

• One layout engine that outputs positioned primitives, shared by the SVG preview and the PDF writer
• Five print layouts including DL tri-fold panels and a table tent with a rotated back face
• Flat SVG dietary icons drawn as vector shapes in both the preview and the PDF
• Theme colours, standard PDF fonts, logo upload with transparency, and currency handling that falls back to the ISO code
• Autosave plus 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.
• PDF standard fonts cover Latin text, the euro and the pound only, so other scripts print as question marks and some currencies print as their code.