Free Online Invoice Generator & PDF Export Tool

Overview

A 100% client-side, browser-based invoice generator designed for freelancers and small business owners. The tool provides a live, interactive preview that updates in real-time as users fill out their invoice details. All data is processed locally, ensuring privacy.

Core Features

• Dynamic Line Items: Ability to add, remove, and edit multiple line items with automatic subtotal, tax, and discount calculations.
• Local Storage Persistence: Automatically saves input fields to the browser's LocalStorage, so users never lose progress on a refresh.
• Instant PDF Export: Utilizes the browser's print-to-PDF functionality or a dedicated client-side library to export high-quality PDF files.
• Data Import/Export: Functionality to download and upload JSON state files for moving drafts between different devices.
• Live Preview: A split-screen UI that allows users to see exactly what the final invoice looks like while editing.

UI Layout

• Header: Simple, clean header with 'Clear', 'Save Draft', 'Load Draft', and 'Download PDF' action buttons.
• Main Tool Area: A responsive two-column grid layout.
  • Left Column: A scrollable form containing sections for 'Sender Info', 'Client Info', 'Invoice Details', and 'Line Items'.
  • Right Column: A static, styled preview area that renders the invoice using crisp typography and clear layout blocks.

Design & Aesthetic

• Palette: Professional light-mode aesthetic. Use a base of #FFFFFF (background), #F4F4F4 (secondary), #333333 (primary text), and #007BFF (primary action blue). No dark mode.
• Typography: Modern sans-serif stack for inputs and interface; clean serif or sans-serif for the rendered invoice.
• Interactions: Subtle, smooth transitions on input focus and hover states for buttons. No complex animations.

Technical Constraints

• Single File: The entire application must be contained within a single HTML file (CSS and JS embedded).
• Framework-Free: Use vanilla JavaScript (ES6+). No frameworks, no build systems, no npm packages.
• Responsive: The UI must stack from two columns to one on smaller screens.
• Sandbox-Ready: Must function perfectly inside a sandboxed iframe without needing external assets or API connections.
• No Branding/Footer: Strictly no branding, logos, links to other sites, or page footers.