A single-file, client-side web app for designing and mass-producing ID cards (or any card-style layout) from a CSV/Excel data source. Everything runs in the browser — no backend, no upload of your data anywhere.
Available in Indonesian (default) and English, with a light/dark theme toggle.
The repo ships two standalone, self-contained editions of the app. Both offer the same feature set described below — pick whichever one suits your setup, they aren't meant to be used together.
idcard-generator-v1.html |
idcard-generator-v2.html |
|
|---|---|---|
| Canvas/editing engine | Custom hand-built 2D canvas engine | Fabric.js |
| PDF export pipeline | jsPDF + svg2pdf.js | pdf-lib + fontkit (direct) |
- Bulk data import — Load a CSV or XLSX file (first row = column headers) to drive card generation, one card per row.
- Photo matching — Bulk-upload photos and auto-match them to rows via a chosen "matching" column (filename without extension). Supports multiple photo sources for different image elements (e.g. ID photo + signature).
- Visual card editor — Drag, resize, rotate, and skew elements on a WYSIWYG canvas:
- Text fields (bound to data columns or static)
- Data-bound photos
- Static images (including SVG/PDF as vector sources)
- QR codes
- Shapes: rectangle, rounded rectangle, ellipse, triangle, right triangle, diamond, trapezoid, parallelogram, pentagon, hexagon, star, line, single/double arrows
- Card setup — Standard CR80 size or custom width/height, portrait/landscape swap, single or double-sided cards, bleed/extra size for trimming, adjustable export DPI.
- Custom fonts — Upload your own font files (.ttf/.otf/.woff/.woff2), load a font from a URL, or pull any Google Font by name.
- Background control — Upload a background image per side, choose Cover/Contain/Stretch fit, zoom, drag-to-position on canvas, alignment shortcuts, and arrow-key nudging (1 mm, or 0.1 mm with Shift).
- Element tools — Multi-select, copy/paste (including paste-to-other-side), alignment tools (left/center/right, top/middle/bottom), undo/redo (Ctrl+Z / Ctrl+Y).
- Print layout & export:
- Export a single card as PNG
- Export all cards as a ZIP of PNGs
- Export a print-ready PDF with all data rows laid out on a chosen paper size, with configurable margins, gaps, fill order (row-first/column-first), auto/portrait/landscape orientation, card rotation, front/back combining (side-by-side or stacked, with optional 180° flip and mirroring for duplex printing), and cut guides (corner marks or full lines)
- Choice between flattening each card to a single raster image or exporting as vector + layered PDF (text stays selectable, SVG/PDF sources and QR codes stay vector) for smaller, sharper output
- Save/load layout — Save the entire card design as a JSON file and reload it later to continue editing or reuse with new data.
- Upload your CSV/XLSX data file.
- Upload the photos referenced by your data (optional).
- Configure card size, sides, and background(s).
- Add and arrange text, photo, image, QR, and shape elements on the canvas, binding text/photo elements to data columns.
- Configure the print layout (paper size, margins, orientation, etc.).
- Export as PDF (all cards, print-ready), ZIP of PNGs, or a single PNG.
- Optionally save your layout as JSON to reuse for a future batch.
All libraries are loaded from public CDNs — no build step or install required.
| Library | Version | Purpose | Used in |
|---|---|---|---|
| jsPDF | 4.2.1 | Generating the print-ready PDF output | v1, v2 |
| svg2pdf.js | 2.7.0 | Converting SVG content (vector elements/shapes) into PDF drawing operations | v1, v2 |
| Fabric.js | 5.3.1 | Canvas rendering and interactive object editing | v2 |
fontkit (via @pdf-lib/fontkit) |
1.1.1 | Font parsing/embedding for vector PDF text export | v2 |
| JSZip | 3.10.1 | Bundling exported card PNGs into a downloadable ZIP archive | v1, v2 |
| SheetJS (xlsx) | 0.18.5 | Parsing uploaded CSV/XLSX data files | v1, v2 |
| pdf-lib | 1.17.1 | Embedding source PDF files (used as backgrounds/images) as native vector pages in the exported PDF | v1, v2 |
| pdf.js | 3.11.174 | Rendering/reading PDF files used as image or background sources | v1, v2 |
| qrcode (bundled inline, not CDN-loaded) | — | Generating QR code elements | v1, v2 |
| Google Fonts (DM Mono, Syne, Roboto, Montserrat, Open Sans, Poppins, Oswald) | — | Default UI/card typography, plus support for adding any additional Google Font by name | v1, v2 |
- Everything (data, photos, rendering, export) happens client-side in the browser; no data is sent to a server.
- Theme and language preferences are remembered locally via
localStorage. - Best used in a modern desktop browser given the density of the editing UI, though it includes a mobile tab layout (Settings / Card Editor).