Open SourceInvoice Creator

Offline-first invoice generation toolReact 18 + Vite + TypeScript + Zustand + React Router + html-to-image + jsPDF + CSS Modules

Invoice Creator.

Institutional-grade, zero-backend, privacy-first invoice generator built for Indian financial consultants, freelancers, and small businesses. Generates pixel-perfect, GST-ready PDF invoices entirely in the browser — no servers, no sign-ups, no data leaving your machine. Features 20+ professional templates via a registry-based TemplateEngine, Indian FY numbering (INV/FY25-26/0001), UPI QR code generation, multi-profile sender management, and full client CRM — all stored in localStorage with JSON export/import backup.

View on GitHub Installation Guide

What the README tells you

0 ⭐ | 1 fork | 18 commits | Private license. The README documents complete project structure tree (73+ files), 20+ template registry system, Indian financial compliance (FY numbering, Lakhs/Crores, GSTIN, PAN, UPI QR), 7-step usage guide, localStorage persistence schema with 7 keys, File System Access API backup, .cursorrules for AI assistants, and chunk-splitting Vite config. Languages: TypeScript 83.4%, CSS 15.1%.

Features

What this repo gives you.

A quick practical feature map before you open the source code.

Dashboard — Revenue tracking with stats cards, quick actions, and recent invoice list. Professional layout with sidebar navigation.

Invoice Creator — Split-pane UI with form editor on left and real-time A4 preview on right. Line-item editor with quantity, rate, GST auto-calculation. Client selector with search modal. Template gallery with 20+ designs on the right panel.

20+ Template Engine — Registry pattern where each template is metadata (id, name, category, layout, accent, fontFamily). 4 layout types (classic/corporate/minimal/centered) × dynamic accent colors = 20+ distinct visual styles with zero code duplication via TemplateEngine.tsx.

Indian Financial Compliance — FY numbering (INV/FY25-26/0001, auto-increments per FY), Amount in Words (Indian system: Lakhs/Crores), GSTIN support (sender + client), PAN display, UPI QR code auto-generation from UPI ID for instant payments.

Client CRM — Full client database with add/edit/delete, GSTIN storage, search modal for quick selection during invoice creation.

Transactions Ledger — All saved invoices with status management (Paid/Sent/Overdue), duplicate, and delete actions.

Multi-Profile Settings — Create multiple sender profiles (company name, logo, signature, PAN, GSTIN, bank details: A/C No, IFSC, UPI ID). Switch profiles per invoice.

Data Persistence — localStorage under mrchartist_inv_* prefix (7 keys: settings, invoices, clients, items_catalog, transactions, auth, template). JSON Export/Import + Chrome File System Access API for direct disk sync. PIN-based local authentication.

Installation

Step-by-Step Setup.

Follow these steps to get Invoice Creator running on your machine.

Setup Path

Run it locally, then inspect the system.

Follow the README flow first. Once the app opens locally, use the AI prompts below to trace the data flow and make focused changes.

CloneInstallRunInspect

Install

Start here

Install Node.js v18+ (recommended: v20+).

Clone

Clone. git clone https://github.com/MrChartist/Invoice.git && cd Invoice

git clone https://github.com/MrChartist/Invoice.git

Install

Install. npm install

npm install

Dev mode

Start dev server. npm run dev — opens on http://localhost:5173 with HMR.

npm run dev

Step 5

Create your account with a 4-digit PIN on first visit. Set up company profiles in Settings.

Deploy

For production. npm run build outputs to dist/, deployable to any static host (Vercel, Netlify, GitHub Pages).

Deploy

Production

Preview production build. npm run preview.

Want AI to do this for you?Copy a ready-made prompt for Antigravity, Codex, or Claude below ↓

AI-Powered Setup

Set Up Invoice Creator With AI.

Pick your AI tool, copy the prompt, and let it handle the entire setup and codebase walkthrough for you.

Google Antigravity

Best when you want the assistant to operate inside the editor and handle setup end-to-end.

Desktop editorGitNode or PythonModel access

Ready-to-use prompt ↓

Open https://github.com/MrChartist/Invoice. Clone the repository, inspect the README first, then set up the project locally using the exact setup steps from the README. Before editing anything, explain the stack, folder structure, data flow, required environment variables, and the safest first customization for this project: Run npm run dev, create a test invoice with a template, then ask an AI to explain the TemplateEngine registry pattern before customizing templates.

How it works: Paste the prompt into Antigravity after choosing the repo. Ask it to read the README first, run setup commands, keep changes small, and explain every file it touches before editing.

OpenAI Codex

Best when you want command-by-command setup, debugging, code edits, and verification in a local workspace.

GitTerminalNode or PythonLocal workspace

Ready-to-use prompt ↓

I want to work on https://github.com/MrChartist/Invoice. First read the README and summarize what the project does. Then give me the exact commands for my operating system to clone, install, configure environment variables, and run it locally. After it runs, inspect the codebase and propose one small change that matches this goal: Run npm run dev, create a test invoice with a template, then ask an AI to explain the TemplateEngine registry pattern before customizing templates.

How it works: Paste the prompt into Codex with the repository URL. Ask it to run the project, identify the stack from files instead of guessing, make scoped edits, and verify with build or browser checks.

Claude

Best when you want architecture explanation, codebase understanding, and a clean implementation plan before edits.

Repo accessREADME contextTerminal if using Claude Code

Ready-to-use prompt ↓

Analyze https://github.com/MrChartist/Invoice from the README and source structure. Create a clear architecture map, explain the main modules, identify setup risks, and recommend a safe implementation plan for extending it. Focus especially on: Ask the AI to map the component architecture: pages/ (Dashboard, InvoiceCreator, Transactions, Clients, Settings, LoginPage) → components/ (form/, preview/, templates/, modals/, ui/) → store/ (Zustand + React Context) → lib/ (auth, localDb, utils). Ask it to explain the TemplateEngine registry pattern: how template metadata (layout, accent, font) drives rendering in TemplateEngine.tsx without code duplication. Ask it to trace the PDF export pipeline: InvoicePreview component → html-to-image capture → jsPDF A4 rendering → download. Ask it to explain the Indian FY numbering logic in utils.ts and how amount-in-words uses Lakhs/Crores instead of Millions/Billions. IMPORTANT: Read .cursorrules first — no Tailwind (CSS Modules only), no backend, no @react-pdf/renderer, respect snapshotting (use invoice.sender not global settings), keep Indian FY numbering.

How it works: Paste the prompt with the GitHub link. Ask Claude to read the README, map modules, list risks, and produce a practical plan before using Claude Code or another agent to implement.

AI Focus

What to Ask the AI.

After setup, use these focused questions to get the most value from your AI assistant.

AI Briefing Mode

Ask for maps, not magic.

Use these prompts after the repo runs locally. The goal is to make the AI trace the system before it changes code.

FlowLogicRiskChange

Explain the architecture

Ask the AI to map the component architecture: pages/ (Dashboard, InvoiceCreator, Transactions, Clients, Settings, LoginPage) → components/ (form/, preview/, templates/, modals/, ui/) → store/ (Zustand + React Context) → lib/ (auth, localDb, utils).

Prompt 2

Ask it to explain the TemplateEngine registry pattern: how template metadata (layout, accent, font) drives rendering in TemplateEngine.tsx without code duplication.

Prompt 3

Ask it to trace the PDF export pipeline: InvoicePreview component → html-to-image capture → jsPDF A4 rendering → download.

Trace the logic

Ask it to explain the Indian FY numbering logic in utils.ts and how amount-in-words uses Lakhs/Crores instead of Millions/Billions.

Prompt 5

IMPORTANT: Read .cursorrules first — no Tailwind (CSS Modules only), no backend, no @react-pdf/renderer, respect snapshotting (use invoice.sender not global settings), keep Indian FY numbering.

Best Next Step

Run npm run dev, create a test invoice with a template, then ask an AI to explain the TemplateEngine registry pattern before customizing templates.

Open on GitHub Browse All Projects

TV Scraper

MCP Servers