A fast, no-backend invoice generator built with React and Tailwind CSS. Add line items, set tax and discount rates, preview a printable receipt, and export straight to PDF — styled like a hand-ruled accounting ledger.
- Dynamic line items — add or remove billable items on the fly, with live quantity and price editing
- Auto-calculated totals — subtotal, discount, tax, and grand total update as you type
- Invoice numbering — auto-increments (with leading zeros preserved) each time you start a new invoice
- PDF export — renders the invoice preview to a paginated PDF you can download instantly
- Ledger-inspired UI — ruled paper background, binder punch-holes, a stamped invoice number, and a tear-off receipt stub sidebar
- React
- Tailwind CSS
- Headless UI — accessible modal/dialog primitives
- html-to-image — DOM-to-image capture
- jsPDF — PDF generation
- uid — unique IDs for line items
- Node.js 16+
- npm or yarn
# Clone the repository
git clone https://github.com/shuvomdhar/Invoice-Generator.git
cd Invoice-generator
# Install dependencies
npm install
# Start the development server
npm startThe app will be available at http://localhost:5173/.
npm run buildsrc/
├── components/
│ ├── InvoiceForm.jsx # Main form: cashier/customer info, line items, totals
│ ├── InvoiceItem.jsx # Single editable line item row
│ ├── InvoiceField.jsx # Reusable controlled input used inside line items
│ └── InvoiceModal.jsx # Printable preview + PDF export + "next invoice" flow
├── helpers/
│ └── incrementString.js # Increments the numeric portion of the invoice number
├── App.jsx
└── index.css
- Fill in the cashier and customer names.
- Add line items with a name, quantity, and price — use Add line item for more rows.
- Set an optional tax rate and discount rate (both as percentages).
- Click Review Invoice to open the printable preview.
- Click Download to export the invoice as a PDF, or Next to save the current invoice number and start a fresh invoice.
This project is open source and available for personal or commercial use.