mazipan / mazipan/html-tools

feat: add Invoice Generator tool

Open
#134 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
HTML
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Summary

Add an invoice-generator.html tool that lets freelancers fill in a form and instantly download a clean PDF invoice — built on pdf-lib which is already in the project.

Motivation

"free invoice generator" has enormous search volume from freelancers and small businesses. This is the most creatively unexpected tool for this project and the one most likely to attract a non-developer audience — which broadens the site's reach significantly. Since pdf-lib is already a dependency (used by the PDF tools), the implementation cost is lower than it appears.

Proposed UX

Form fields:

  • Your info: Name / Company / Address / Email / Logo upload (optional)
  • Client info: Name / Company / Address / Email
  • Invoice details: Invoice # (auto-increment from last used, stored in localStorage) / Issue date / Due date / Currency selector
  • Line items table: Description · Qty · Unit price — add/remove rows, drag to reorder
  • Subtotal / Discount (% or flat) / Tax rate (%) / Total — auto-calculated
  • Notes / Payment terms textarea (free text)

Live preview: rendered <canvas> or styled HTML preview that mirrors what the PDF will look like — updates as you type

Export: Download PDF (clean A4 layout, professional typography using the IBM Plex fonts already loaded by the site) · Copy share link (encodes the invoice as a compressed URL param for sharing a draft — optional v2 feature)

Persist: last-used sender details saved to localStorage so repeat invoices only need client + line items filled in

Implementation notes

  • Category: Generators
  • Slug: invoice-generator
  • Icon: 🧾
  • Library: pdf-lib (MIT) — already in the project via pdf-merger, pdf-watermark, etc. Use sibling-module pattern (invoice-generator.js)
  • Layout: use pdf-lib's drawText, drawLine, drawRectangle primitives; embed IBM Plex font subset via embedFont if feasible, otherwise fall back to Helvetica (built-in standard PDF font)
  • Follow src/_tool-template.html and run bun run generate:sections, bun run generate:index, bun run generate:favicon after adding to tools.json

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/_tool-template.html, the existing PDF tool modules such as pdf-merger and pdf-watermark, and the tools.json entry for registration. Review the sibling-module pattern and run the listed generate:sections, generate:index, and generate:favicon commands after adding the tool. Done means the registered invoice-generator tool supports the specified form, live preview, PDF download, and sender-detail persistence.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
frontend, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.