StrataMetriq ID Card Designer Studio
Universal turnkey ID card designer, dashboard & A4 multi-page PDF cut-sheet rendering engine.
- 1. Turnkey Dashboard & 4-Step Workflow
- 2. Zero-Config Field Discovery (`sampleRecords`)
- 3. Standalone Studio (`<IdCardDesignerModal />`)
- 4. Batch A4 PDF Engine (`generateIdCardsPdf`)
- 5. JSON Template Schema (`templateSchema`)
- 6. Vue, Angular & Vanilla JS Mounting
- 7. Multi-Department Dictionary & App Structure
- 8. Enterprise FAQ & Security
1. Turnkey All-In-One Dashboard (`<IdCardManager />`) & 4-Step Master Workflow
Drop in a complete, ready-to-use workspace containing department tabs, live vector stage, batch A4 print setup, and roster selection table. We engineered a clean, full-width unified layout broken into four logical steps:
Department Category Grid
4-card header grid showing your categories (`Student IDs`, `Faculty & Admin`, `Corporate HR`, `Hospital Portal`). Displays bound field counts and active templates.
Live Stage & Studio Launcher
High-resolution vector preview with Zoom (`80%-150%`), toggleable grid/ruler (`0-80mm`), and Studio Launcher modal opening our drag-and-drop designer.
Batch A4 Print Engine (`⚡ Live Matrix`)
Dynamically computes physical sheet mathematics! When you toggle `A4` vs `US Letter` or cut sizes (`86×54mm ID-1`, `90×50mm`), it calculates exact grid capacity (`3×3 = 9 cards/page`) and hardware crosshair cut marks (`0.35mm`).
Live Roster Directory Table & Instant Search
Interactive roster table with instant search across names/departments, quick filter pills (`All | Selected | Unselected`), and smart batch selection.
import React, { useState, useEffect } from 'react';
import { IdCardManager } from '@stratametriq/id-card-designer';
import '@stratametriq/id-card-designer/dist/index.css';
export default function SchoolPortal() {
const [dbRecords, setDbRecords] = useState({ student: [], staff: [] });
// 1. Fetch real students/employees from your backend (Node.js, Laravel, Supabase, etc.)
useEffect(() => {
fetch('https://api.yourschool.com/students')
.then(res => res.json())
.then(data => setDbRecords({ student: data }));
}, []);
// 2. Pass your live data right into <IdCardManager />!
return (
<IdCardManager
sampleRecords={dbRecords}
onSaveCategoryTemplate={(category, templateSchema) => {
console.log(`Saving ${category} template to DB:`, templateSchema);
}}
onBatchExportComplete={(category, exportedRecords) => {
console.log(`Generated A4 PDF for ${exportedRecords.length} records!`);
}}
/>
);
}2. Zero-Configuration Automatic Field Discovery
You never have to worry about missing fields. If your database or user records contain custom columns (`bloodGroup`, `busRouteNo`, `emergencyPhone`, `allergyAlert`) that are not explicitly defined in `fieldDefinitions`, `<IdCardManager />` handles them automatically:
When opening the Studio Canvas, our property engine scans `Object.keys(sampleData[0])` directly from your passed records.
Raw keys like `busRouteNo` are automatically transformed into clean titles like "Bus Route No (`busRouteNo`)".
Every discovered key merges into the `Data Field Key` dropdown. Operators can click `+ Add Element` ➡️ `Dynamic Field` and bind it instantly without writing code!
4. Framework-Agnostic Batch A4 PDF Engine (`generateIdCardsPdf`)
The core multi-page A4 and US Letter PDF rendering engine is completely framework-agnostic! Whether you are writing pure TypeScript, Node/Express frontend scripts, Vue, or Angular, you can import and run `generateIdCardsPdf()` directly without mounting any React UI components:
import { generateIdCardsPdf } from "@stratametriq/id-card-designer";
// Works natively across Vue, Angular, Svelte, Next.js, and Vanilla JS!
await generateIdCardsPdf({
records: selectedStudentsArray, // Array of data records to render
templateSchema: activeTemplateJson, // JSON template schema object
orientation: "vertical", // "vertical" | "horizontal"
fileName: "Student_Cards_Batch_Output.pdf", // Name of the downloaded file
pageOptions: {
format: "a4", // Paper size ("a4" | "letter")
scale: 2, // Resolution scale (2 = High DPI 300 DPI)
marginMm: 10, // Top/side page margins in mm
spacingMm: 10, // Gap between cards in mm
showCropMarks: true, // Add corner crosshair cut guides
showCutOutline: true, // Add faint card perimeter borders
showHeader: true // Add technical registration header
},
onProgress: (current, total) => {
console.log(`Rendered page ${current} of ${total}`);
}
});5. JSON Template Schema Structure (`templateSchema`)
Every design created in `<IdCardDesignerModal />` is stored and exported as a clean, serializable JSON schema suitable for saving in MongoDB, Postgres, or local storage:
{
"id": "tpl_school_vertical_01",
"name": "Classic Vertical ID",
"orientation": "vertical",
"width": 54,
"height": 86,
"background": {
"color": "#ffffff",
"image": "https://myportal.com/assets/card-bg-watermark.png",
"size": "cover"
},
"elements": [
{
"id": "el_header_box",
"type": "shape",
"label": "Top Header Box",
"x": 0, "y": 0, "width": 54, "height": 14,
"backgroundColor": "#0d6efd",
"zIndex": 1
},
{
"id": "el_photo_slot",
"type": "image",
"subtype": "photo",
"fieldKey": "profilePhoto",
"label": "Student Photo",
"x": 14, "y": 18, "width": 26, "height": 28,
"borderWidth": 1.5, "borderColor": "#0d6efd", "borderRadius": 4,
"zIndex": 3
},
{
"id": "el_student_name",
"type": "field",
"fieldKey": "studentName",
"label": "Student Name",
"x": 2, "y": 48, "width": 50, "height": 7,
"fontFamily": "Inter, sans-serif",
"fontSize": 11, "fontWeight": "bold", "color": "#111111",
"textAlign": "center", "textTransform": "uppercase",
"zIndex": 4
}
]
}6. Multi-Framework Mounting (`Vue`, `Angular`, `Svelte` & `Vanilla HTML`)
If your application is built with Vue.js, Angular, Svelte, or plain HTML/JS, you can easily mount the turnkey `<IdCardManager />` dashboard into any DOM element using `createRoot` in just a few lines of code:
<!-- Inside index.html or your Vue/Angular/Svelte component template -->
<div id="id-card-manager-root"></div>
<script type="module">
import React from 'react';
import { createRoot } from 'react-dom/client';
import { IdCardManager } from '@stratametriq/id-card-designer';
import '@stratametriq/id-card-designer/dist/index.css';
// Mount the visual ID Card Dashboard cleanly inside any HTML div
const rootElement = document.getElementById('id-card-manager-root');
const root = createRoot(rootElement);
root.render(React.createElement(IdCardManager, {
onBatchExportComplete: (category, records) => {
console.log(`Exported ${records.length} cards in ${category}`);
}
}));
</script>8. Enterprise FAQ & Security
Q: Why should my company use this instead of a design tool like Canva?
A: Canva is a manual design tool; our software is an automation pipeline. If a school has 1,000 students, using a consumer design app requires HR to manually type 1,000 names, crop 1,000 photos, generate 1,000 QR codes, and manually align them on A4 paper (80+ hours of work). By embedding @stratametriq/id-card-designer directly into your ERP, your users click one "Batch Print" button. Our engine pulls the data from your database, maps the variables, generates 1,000 QR codes, calculates the A4 cut-sheet math, and spits out a 112-page PDF in exactly 3 seconds.
Q: Our non-technical HR team doesn't know how to code. How do they use this?
A: They will never see a single line of code! Your engineering team installs our NPM package into your codebase just once. From that point on, your non-technical users get a beautiful, intuitive visual dashboard inside your app to drag-and-drop elements and manage batches.
Q: Is our sensitive employee data sent to your servers?
A: No. Our library runs 100% Client-Side in the browser. When your users generate ID cards, the data never leaves their local machine, ensuring full GDPR and data privacy compliance.
Q: Is it white-labeled?
A: Yes, the Commercial Enterprise license allows you to completely remove all Stratametriq branding. Your customers will assume you built this incredible feature from scratch!
Q: How do I know this NPM package isn't malware that will hack our ERP?
A: Our codebase is 100% unminified and transparent. Your security engineers can read every line of code. Furthermore, our engine makes zero network requests (no "phone home" APIs) and runs entirely client-side. It has no access to your backend servers, database, or environment variables, making data exfiltration impossible.
Q: What does my engineering team need in order to install this?
A: The prerequisites are simple: A Node.js environment, a modern package manager (npm, yarn, or pnpm), and a frontend application running React 17/18 or Next.js (Vue/Angular require a React adapter).