InvoiceKit — User & Field Reference Guide — firstlocal.studio
FirstLocal.studio — InvoiceKit
Documentation
User & Field Reference Guide
Everything you need to build, brand, and export professional invoices — every field explained, every option documented.
ProductInvoiceKit v1
Applies toInvoiceKit.html
PlatformAny modern browser
Publisherfirstlocal.studio
Contents
01How InvoiceKit works§1
02Invoice Builder — field reference§2
03Invoice types§3
04Line items — field reference§4
05Tax modes & calculations§5
06Clients & Item Catalog§6
07Settings & brand configuration§7
08History, backup & restore§8
09PDF export workflow§9
10Tips & common mistakes§10
11Quick reference cheat sheet§11
01
How InvoiceKit works
InvoiceKit is a single HTML file. Open it in your browser and it runs entirely on your machine — no server involved at any point.
All data — your business settings, saved clients, item catalog, and invoice history — lives in your browser's localStorage. It persists across sessions automatically. Close the tab and come back tomorrow and everything is still there, on that device, in that browser.
The tool makes no outbound network calls during use. After fonts load from Google Fonts CDN on first open (and cache in your browser), the entire tool works completely offline. Your client names, billing amounts, and business details never leave your machine.
01
Configure your brand once
Open Settings. Upload your logo. Enter your business name, address, email, bank details, default tax rate and label, and preferred currency. Pick your accent color. Save. This applies to every invoice you produce from now on.
02
Save clients and catalog items
Under Clients, save the people and companies you bill. Under Item Catalog, save your standard services and products with their rates. Saved records are searchable in the invoice builder — a client takes two keystrokes to select, a catalog item takes one click to add.
03
Build the invoice
Click New Invoice. The number auto-fills from your prefix and next-number setting. Select a client. Add line items. Set tax and discount in the Summary panel. Add notes and payment terms. The total calculates live as you type.
04
Save and export PDF
Hit Save to store the invoice in History. Hit Print / PDF to open your browser's print dialog. Set destination to "Save as PDF" and print. A fully branded A4 invoice downloads. The whole flow from blank to PDF is under two minutes.
02
Invoice Builder — field reference
Every field in the invoice builder, documented. Fields in the top meta bar, the Summary panel, and the Notes section.
Meta Bar Fields — top of the builder
Type
Invoice type. Appears in large type at the top of the exported PDF.
Options: InvoiceReceiptQuoteCredit Note
Defaults to Invoice on New. Changing type updates the builder title bar.
Number
Auto-filled as [Prefix]-[NextNumber] on New Invoice. Example: INV-1001. Edit freely — the auto-number is a starting point, not a constraint. The next number increments in Settings when you save an invoice for the first time.
Prefix and starting number are set in Settings → Invoice Defaults.
Date
Invoice issue date. Auto-fills to today's date on New. Edit via the date picker. Appears on the exported PDF as a formatted date (e.g. "May 17, 2026").
Due Date
Payment due date. Auto-calculated from today plus the number of days found in your default Payment Terms (e.g. "Net 30" → 30 days out). Edit freely.
Optional — leave blank if not applicable (e.g. receipts).
Summary Panel Fields — right column
Discount %
Percentage discount applied to the subtotal before tax. Enter 10 for 10% off. The discount amount shows in the summary panel and on the exported PDF.
Default 0. Applied before tax calculation.
Tax Rate %
Tax percentage applied after discount. The label next to it reads whatever you set as Tax Label in Settings (Tax, GST, VAT, etc.). Applied to the after-discount subtotal in exclusive mode; derived from included price in inclusive mode.
Defaults to your Settings → Default Tax Rate on New Invoice.
Currency
Currency symbol for this invoice. Changing the currency updates all displayed amounts immediately. 14 options: USD ($), EUR (€), GBP (£), JPY (¥), INR (₹), AUD (A$), CAD (C$), CHF (Fr), ZAR (R), KRW (₩), BRL (R$), SEK (kr), MXN (Mex$), AED (د.إ).
Defaults to your Settings → Default Currency on New Invoice.
Notes & Terms Fields — bottom of builder
Notes
Free-text area for payment instructions, thank-you messages, or any additional information. Printed at the bottom of the exported PDF in a dedicated Notes section.
Defaults to Settings → Default Invoice Notes on New Invoice.
Payment Terms
Printed on the PDF. Also used to auto-calculate the Due Date on New Invoice — the tool extracts any number it finds (e.g. "30" from "Net 30") and adds that many days to today.
Examples: Net 30 · Net 15 · Due on Receipt · Net 60
Status
Tracking status for your own records. Displayed as a badge on the PDF and in the History list.
Options: DraftSentPaidOverdue
Default Draft on New Invoice. Update as the invoice moves through its lifecycle.
03
Invoice types
The Type field controls the document title on the exported PDF. All four types use the same builder, fields, and export — only the label changes.
Type
When to use
Typical status
Invoice
A request for payment for goods or services delivered. The most common document type — use this for standard client billing.
Draft → Sent → Paid
Receipt
Confirmation that payment has already been received. Use this when a client pays upfront or when generating a post-payment record.
Paid
Quote
A priced estimate for work not yet performed. Sent before work starts for client approval. Duplicate and change to Invoice once approved.
Draft → Sent
Credit Note
A document reducing an amount previously invoiced — for refunds, returned goods, or billing corrections. The total on the PDF reads as a credit amount.
Draft → Sent
💡
Quote → Invoice workflow
Build a Quote and send it. Once the client approves, open the Quote from History, hit the duplicate (⧉) button, change the Type to Invoice, update the date, and save. The new invoice auto-increments the number. Your quote is preserved in History as a reference.
The status workflow for each type:
Draft→Sent→PaidorOverdue
Status has no effect on calculations — it's a tracking label for your own records, visible in History and on the PDF.
04
Line items — field reference
Each row in the line items table represents one billable item or service. Add as many rows as needed. The Amount column calculates automatically.
Field
Description
Notes
Item / Service
The name of the item or service. Appears in the Description column on the exported PDF, in bold above any description text.
Required for a meaningful export. Blank rows are filtered from the PDF.
Description
Optional secondary text for this line item. Appears in smaller type below the Item name on the PDF. Use it for scope details, revision rounds, specific deliverables.
Optional. Leave blank to omit.
Qty
Quantity of units. Accepts decimals (e.g. 1.5 for one and a half hours). Multiplied by Rate to calculate Amount.
Default 1
Unit
Unit label printed after the quantity on the PDF. Common values: hrdaywordpageitem. Displayed only — no effect on calculation.
Optional
Rate
Price per unit. Multiplied by Qty to calculate Amount. Accepts decimals. Enter the rate in your selected currency — the symbol is applied automatically.
Default 0
Amount
Calculated field: Qty × Rate. Read-only — updates automatically as you type in Qty or Rate. Feeds into the Subtotal in the Summary panel.
Auto-calculated. Cannot be edited directly.
Adding items from the Catalog
Click + From Catalog at the top right of the Line Items card. A picker opens showing all saved catalog items. Search or scroll, click any item, and it drops into the table as a pre-filled row with the saved name, description, rate, and unit. Edit the Qty field for this invoice — everything else is already set.
💡
Reorder and remove
Click the × button on any row to remove that line item. To reorder, remove the item and re-add it in the desired position — or simply edit the Item name field to change what that row represents without losing the Qty and Rate you've already set.
05
Tax modes & calculations
InvoiceKit supports two tax modes — exclusive and inclusive — set globally in Settings and applied to every invoice.
Tax Exclusive Mode (default)
What it means
Tax is calculated on top of your line item prices and added to the subtotal. Your rates are pre-tax. The client pays the rate plus the applicable tax.
Calculation
Subtotal = sum of (Qty × Rate) for all line items Discount = Subtotal × (Discount% / 100) After Discount = Subtotal − Discount Tax = After Discount × (Tax Rate% / 100) Total = After Discount + Tax
Tax is embedded in your line item prices. Your rates already include tax. The client sees the total-inclusive amount; the tax component is shown for their records. Common in retail and B2C contexts, and in countries where GST/VAT is quoted inclusive.
Calculation
Subtotal = sum of (Qty × Rate) — tax already included Tax = Subtotal × (TaxRate / (100 + TaxRate)) Total = Subtotal (unchanged — tax is already in the price)
The tax mode applies globally — check before issuing
Tax mode is a Settings-level default and applies to all invoices. If you bill some clients exclusive and some inclusive, set the mode in Settings before building each invoice. The mode in effect at the time you export the PDF is what applies. The PDF calculation always shows the mode used.
Tax Label
The Tax Label field in Settings controls what the tax line is called on the PDF and in the Summary panel. Common values: Tax · GST · VAT · HST · Sales Tax. Set it once and it applies everywhere.
06
Clients & Item Catalog
Save your recurring clients and standard services once. Access them in every invoice you build.
Client fields
Field
Description
Used on PDF
Full Name
Client's full name or primary contact name. Required. Appears as the primary heading in Bill To.
✓ Bold header
Company
Company or organisation name. Appears below the name in Bill To.
✓ Below name
Email
Contact email address. Shown in Bill To and used in the autocomplete search.
✓
Phone
Phone number. Shown in Bill To section of the PDF.
✓
Address
Full billing address, multi-line. Printed verbatim in Bill To — format it the way you want it to appear.
✓ Verbatim
Tax ID / VAT No.
Client's tax identifier. Appears below address in Bill To if set. Useful for B2B invoices where the client's VAT number is legally required.
✓ If set
💡
Searching clients in the builder
In the Bill To field on the invoice builder, start typing any part of the client's name, company name, or email address. The autocomplete list updates as you type. Click any result to select — the full client card renders instantly below the search field.
Catalog item fields
Field
Description
Item Name
The service or product name. Required. Appears as the Item / Service name in the line item when added to an invoice.
Description
Optional detail text. Pre-fills the Description column of the line item when added from catalog.
Rate
Default rate per unit. Pre-fills the Rate column. Edit per-invoice after adding — the catalog rate is a starting point.
Unit
Unit label (hr, day, word, page, item, etc.). Pre-fills the Unit column.
Category
Optional grouping label. Shown as a badge on the catalog card. Useful for filtering when your catalog grows. No effect on invoices.
07
Settings & brand configuration
Settings persist across all invoices. Configure once — your brand applies to every PDF you export.
Business Profile fields
Logo
PNG, JPG, or SVG. Stored as a base64 data URL in localStorage — no file path dependency. Max display height 60px on PDF. Click the upload area or drag a file in. Click "Remove logo" to clear.
Business Name
Your trading name. Appears on the PDF header next to or below the logo, in your accent color. Also in the PDF footer.
Tagline
Optional subtitle beneath your business name on the PDF. Good for "Professional Services" or a strapline.
Email / Phone
Contact details shown in the PDF header and footer.
Address
Multi-line. Printed verbatim in the header. Format it the way you want it to appear on the document.
Website
Shown in PDF header beneath phone. Omit the https:// if you prefer a cleaner look.
Tax ID / VAT No.
Your own tax identifier. Shown below your business address on the PDF if set — required by law in many jurisdictions for VAT-registered businesses.
Bank / Payment Details
Multi-line payment instructions. Appears in a second column beside Bill To on the PDF — labeled "Payment Details". Format as you'd put it in an email: Bank name, account number, sort code, SWIFT/IBAN.
Leave blank to omit the column entirely.
Invoice Defaults fields
Setting
Effect
Default
Invoice Prefix
Prepended to the auto-number on each New Invoice. Example: INV produces INV-1001. Use RCP for receipts or QT for quotes if you keep separate sequences.
INV
Next Number
The number appended after the prefix on the next New Invoice. Auto-increments each time you save a new (not existing) invoice. Edit directly to reset or sync with an external system.
1001
Default Tax Rate
Pre-fills the Tax Rate field in the Summary panel for each New Invoice. Override per invoice without affecting the default.
0
Tax Label
The name displayed on the Summary panel tax row and on the PDF. Country-dependent: Tax · GST · VAT · HST · Sales Tax.
Tax
Tax Mode
Exclusive (tax added on top) or Inclusive (tax embedded in rates). Applied globally. See Section 05 for full calculation detail.
Exclusive
Default Currency
Pre-fills the currency selector in the Summary panel for each New Invoice. Override per invoice.
$ USD
Default Payment Terms
Pre-fills the Payment Terms field. Also used to auto-calculate Due Date on New Invoice.
Net 30
Default Invoice Notes
Pre-fills the Notes field on each New Invoice. Good for a standard "Thank you for your business" message or your standard payment instructions.
Empty
Accent Color
Choose from 9 presets or enter a custom hex value. The color applies to: the sidebar active state, button colors, form focus rings in the app UI — and on the PDF: the header color bar, the line items table header background, the Total row background, and section label text.
If you rebrand, update the color in Settings and every future PDF uses the new color. Previously exported PDFs are unaffected.
08
History, backup & restore
InvoiceKit stores every saved invoice in your browser's localStorage and provides a one-click JSON export for backup or device migration.
Invoice History
Every invoice you save appears in History in reverse chronological order. Each row shows the invoice number, client name, type, date, status badge, due date, and total. Click any row to load that invoice back into the builder.
Action
How
Load invoice
Click anywhere on the history row. The builder loads that invoice with all fields, line items, client, and settings restored.
Duplicate invoice
Click the ⧉ button. Creates a copy with a new auto-incremented number and today's date. Status resets to Draft. Original is preserved.
Delete invoice
Click the ✕ button. Confirms before deleting. Permanent — cannot be undone unless you've exported a backup containing that invoice.
Filter / search
Use the search field in the History topbar to filter by invoice number, client name, or company name.
Backup & Restore
At the bottom of the sidebar are two buttons: Export Backup and Import Backup.
Export Backup downloads a JSON file named invoicekit-backup-[date].json containing all of your settings, clients, catalog items, and invoices. Keep this somewhere safe — it's your complete data snapshot.
Import Backup reads a JSON backup file and merges its contents into your current data. Records are merged by ID — existing records with the same ID are updated; records with new IDs are added. No data is deleted during import.
⚠️
localStorage is browser-specific
Data stored in localStorage exists only in the browser where you created it. If you open InvoiceKit in a different browser, or on a different machine, it starts fresh. Use Export Backup → Import Backup to move data between browsers or devices. Export a backup before clearing your browser cache.
09
PDF export workflow
InvoiceKit generates PDFs using your browser's built-in print engine. No third-party library, no upload, no service.
01
Build and check your invoice
Complete all fields in the builder. Check the Summary panel totals — discount, tax, and final total should look right. Check the Notes field for payment instructions you want on the document.
02
Click Print / PDF
The green Print / PDF button — in the topbar or in the Summary panel. This renders a print-ready invoice layout in a hidden element and triggers your browser's print dialog.
03
Configure the print dialog
In the print dialog: set Destination to "Save as PDF" (Chrome) or "PDF" (Firefox/Safari). Set Paper size to A4 or Letter. Set Margins to "None" — the invoice has its own internal padding. Disable "Headers and footers" if shown.
04
Save
Click Save or Print. Your browser writes the PDF to disk. File name defaults to your browser's page-title convention — rename it to your invoice number after downloading.
What's on the exported PDF
Your logo, business name, tagline, address, email, phone, website, and Tax ID — top left
Invoice type (large), number, date, due date, terms, and status badge — top right
Bill To section with full client details — left column below header
Payment Details column (your bank info) — right column beside Bill To, if set
Line items table with branded header row in your accent color — alternating row shading
Subtotal, discount, tax, and total summary — right-aligned below the table
Notes section — below totals, if notes are set
Footer with your business name, email, phone, and invoice number
Accent color bars at the top (7px) and bottom (5px) of the document
10
Tips & common mistakes
The things that trip people up and how to fix them quickly.
⚠️
The PDF total doesn't match what I expected
Check the Tax Mode in Settings. If you're in Inclusive mode and entered pre-tax rates, the total will appear correct but the tax breakdown will be extracted from the total rather than added to it. Switch to Exclusive mode if your rates are pre-tax prices.
⚠️
My logo isn't showing on the PDF
Make sure you clicked Save Settings after uploading the logo. The logo is stored as base64 in localStorage — if you uploaded it but didn't save, it wasn't persisted. Re-upload and save. Very large logo files (above ~2MB) may also cause localStorage size issues — compress the image first.
⚠️
The invoice number didn't increment on my new invoice
The next number only increments when you save an invoice for the first time. Duplicating an invoice also increments the counter. If you discard a new invoice without saving, the number doesn't increment. Check Settings → Next Number and set it manually if you need to skip or reset the sequence.
⚠️
A client I added isn't showing in the autocomplete
The autocomplete searches by name, company, and email. If you only typed a phone number or address, there's no match. Try typing the first few letters of the client's name or company. If they still don't appear, go to Clients in the sidebar to verify the record was saved correctly.
⚠️
My data disappeared
InvoiceKit data lives in your browser's localStorage for that specific browser and device. Clearing browser cache, using a private/incognito window, or switching to a different browser will show a fresh state. Always export a backup before clearing cache. To transfer data to a new device, export backup → move the JSON file → import backup on the new machine.
⚠️
The PDF prints with browser headers and footers
In the browser print dialog, look for "Headers and footers" and uncheck it. In Chrome, click "More settings" to find this option. This removes the browser-generated URL and page number that would otherwise overlay your invoice footer.
💡
Recurring invoices — fastest workflow
For monthly retainers or recurring clients: build the first invoice completely. Save it. When it's time to invoice again, find it in History, hit ⧉ to duplicate, update the date and any changed amounts, and export. The client is already selected, line items are pre-filled, and the number auto-increments. A recurring invoice takes under 60 seconds once the template is saved.
11
Quick reference cheat sheet
Print this page and keep it next to you while building your first invoices.