🧾 Admin
Invoice Designer
Invoice Designer is a drag-and-drop editor for your printed/PDF invoice layout — move and resize blocks like the logo, customer details, product table and totals, save the result as a named template, and choose which template is actually used when printing real invoices.
📍 Menu path: Admin → Invoice Designer
👤 Who uses it: Admin and Manager — requires the Advanced plan tier or above (invoice_builder feature)
🏷️ Plan tier: advanced+
Overview
The canvas represents one page of your invoice at real scale, in a page size you choose (A4, US Letter, A5, or 80mm/58mm thermal receipt rolls). Ten block types can be freely positioned and resized on it: Logo, Company Details, Invoice Details, Customer Details, Product Table, Tax Summary, Totals, QR Code, Signature, and Footer/Notes.
You can start from one of several built-in preset layouts (Standard GST, Logo Right, Centred Header, Compact — no tax table, and others), then adjust individual blocks, or design entirely from scratch. Templates are saved per store via the Invoice Preset API, and any number of named templates can exist side by side.
A template only affects real invoice printing once you explicitly mark it "Use for printing" — until then, changes here only affect the builder's own preview, so you can safely experiment without disrupting the invoices your cashiers are printing today.
Before You Start
- Requires the
invoice_builderfeature at theAdvancedplan tier or above — the page is wrapped in a tier gate and shows an upgrade prompt instead of the editor on lower tiers. - Saving, publishing, or setting a template as the printing default requires a connected store (a
storeId) — without one, the builder still works but only against sample data and cannot persist templates.
Step-by-Step Guide
1 Start a new template from a preset
- Use the Start from… dropdown in the toolbar to load a built-in layout: Standard GST, Logo Right, Centred Header, Compact (no tax table), or others.
- Switch the GST B2B / GST B2C toggle to auto-adjust the invoice title, customer heading, GSTIN visibility and tax-summary visibility for that GST profile.
- Choose a Page size (A4, US Letter, A5, Thermal 80mm, Thermal 58mm) appropriate to your printer.
2 Move, resize and configure blocks
- Click a block on the canvas (or in the left Blocks list) to select it — its properties appear in the right-hand panel.
- Drag the block by its handle to reposition it, or drag a corner/edge handle to resize it; use the arrow keys to nudge the selected block by 1px (hold Shift for 10px steps).
- In the right panel, fine-tune exact X/Y position, Width/Height, visibility, lock state, and layer (z-index).
- Some blocks have extra text fields: Invoice Details lets you override the printed title; Customer Details lets you change the heading and toggle "Show customer GSTIN"; Signature lets you set the signatory label; Footer/Notes lets you edit the printed terms text.
- Click the ◉/○ icon next to a block in the left list, or press Delete/Backspace with it selected, to hide it without removing it from the layout.
💡 A Preflight bar above the canvas warns about blocks positioned outside the page bounds, blocks that overlap each other, and GST-profile inconsistencies (e.g. B2B mode with GSTIN hidden) — resolve these before publishing for real use.
3 Set business details and appearance
- In the left sidebar's Business Details section, upload a Logo, and fill in Business name, Address, Phone/Email, GSTIN/PAN, and Invoice title.
- Toggle "Show logo" and "GST enabled" as needed.
- Use the toolbar's Colour, Font size, and Font family controls to adjust the overall look, and Margin fields at the bottom of the sidebar to set page margins on all four sides.
4 Save, publish, and use a template for real printing
- Click Save as new and give the template a name (e.g. "GST Invoice", "Proforma", "Challan") to create it, or click Save to update the currently loaded template.
- Click Publish to mark a template as finalised.
- Click Use for printing to make this the template actually used when cashiers print real customer invoices — only one template can be active for printing at a time, shown with a "Used for printing" badge.
- Use ⧉ Duplicate on a saved template to branch off a variant without touching the original, and the × icon to delete a template you no longer need.
- If a template has version history, expand Versions under it and click Restore next to an older version to roll back.
5 Preview and export
- Click Preview to see exactly how the invoice will look printed, using the same sample data shown in the builder ("Sample data" badge) or live store data if connected.
- Click Instant Print to open a print-ready window immediately, or Export PDF to save the current layout as a PDF file.
- Use Undo/Redo in the toolbar (or Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z) at any point to step back or forward through your last 100 edits.
Every Field & Button, Explained
| Field / Button | What it does |
|---|---|
Start from… preset dropdown | Loads a built-in layout (Standard GST, Logo Right, Centred Header, Compact, etc.) as your starting point. |
GST B2B / GST B2C toggle | Auto-adjusts invoice title, customer heading, GSTIN visibility, and tax-summary visibility for the selected GST profile. |
Page size | A4, US Letter, A5, Thermal 80mm, or Thermal 58mm — determines the canvas dimensions and print/PDF output size. |
Colour | Accent colour used across headings and highlighted elements on the invoice. |
Font size / Font family | Base type size (7–13pt) and font (sans-serif, serif, Georgia, Arial, Courier New, Times New Roman, Trebuchet MS) for the whole invoice. |
Snap / Grid / Guides | Snap-to-grid toggle, adjustable grid size (2–64px), and alignment guide visibility while dragging blocks. |
Zoom | Canvas zoom level from 50% to 200%, for working on small text or getting an overview of the full page. |
Undo / Redo | Steps backward/forward through layout edit history (up to 100 steps). |
Block list (10 types) | Logo, Company Details, Invoice Details, Customer Details, Product Table, Tax Summary, Totals, QR Code, Signature, Footer/Notes — click to select, click the ◉/○ icon to show/hide. |
X / Y position, Width / Height | Exact pixel placement and size of the selected block on the page canvas. |
Visible / Locked toggles | Show or hide the selected block, or lock it so it cannot be dragged or resized accidentally. |
Layer (z-index) | Stacking order for overlapping blocks — higher values render on top. |
Page Margins | Top/Right/Bottom/Left margin in pixels applied to the whole page. |
Preflight warnings bar | Flags blocks positioned outside the page bounds, overlapping blocks, and GST-profile visibility inconsistencies. |
Saved Templates list | Every template saved for this store, with duplicate (⧉) and delete (×) actions and a "printing"/status badge. |
Versions list | Prior saved versions of the active template, each restorable individually. |
Publish | Marks the active template as finalised (status moves from draft). |
Use for printing / Used for printing | Sets (or shows) which single template is actually applied when real customer invoices are printed. |
Save / Save as new | Updates the currently loaded template, or creates a new named template from the current canvas. |
Preview / Edit toggle | Switches the canvas between the interactive editor and a static, print-accurate preview. |
Instant Print / Export PDF | Opens a print-ready window immediately, or generates a downloadable PDF of the current layout. |
Tips & Best Practices
- Design and fully preview a new template before clicking "Use for printing" — until you do, cashiers keep printing from whatever template is currently active, so there is no risk in experimenting.
- Resolve every Preflight warning (out-of-bounds or overlapping blocks) before publishing — an overlapping Totals/Tax Summary block is a common cause of a broken-looking printed invoice.
- Keep a "Standard GST" template published and set for printing at all times as your safety net, and treat new designs as drafts until you have printed a physical test copy.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl/Cmd + Z | Undo the last layout change. |
| Ctrl/Cmd + Shift + Z (or Ctrl/Cmd + Y) | Redo the last undone change. |
| Arrow keys | Nudge the selected block by 1px. |
| Shift + Arrow keys | Nudge the selected block by 10px. |
| Delete / Backspace | Hide the currently selected block. |
Troubleshooting & FAQ
I don't see this page — it shows an upgrade prompt instead.
Invoice Designer requires the invoice_builder feature at the Advanced plan tier or above; upgrade your plan or contact your Admin if you believe this is a mistake.
My changes aren't showing on real printed invoices.
Editing a template does not automatically apply it — you must click "Use for printing" on that specific template for it to become the one used for real customer invoices.
I can't save my template.
Saving requires a connected store (storeId). If you are testing the builder without selecting a store first, changes only exist in the current session and cannot be persisted.
How do I undo a layout mistake?
Press Ctrl/Cmd+Z (or click Undo in the toolbar) — up to 100 recent changes are kept in history and can be stepped through with Undo/Redo.
🧑💻 Developer Notes
Source component(s):
frontend-app/packages/pos-react-lib/src/pages/invoice-builder/InvoiceBuilderPage.jsxfrontend-app/packages/pos-react-lib/src/pages/invoice-builder/InvoiceCanvas.jsxfrontend-app/packages/pos-react-lib/src/pages/invoice-builder/InvoiceBlocks.jsxfrontend-app/packages/pos-react-lib/src/pages/invoice-builder/defaultLayout.js
Backend endpoints used:
GET /settings/:storeId/invoice-presetsPOST /settings/:storeId/invoice-presetsPUT /settings/:storeId/invoice-presets/:idDELETE /settings/:storeId/invoice-presets/:idPOST /settings/:storeId/invoice-presets/:id/publishPOST /settings/:storeId/invoice-presets/:id/set-defaultPOST /settings/:storeId/invoice-presets/:id/duplicateGET /settings/:storeId/invoice-presets/:id/versionsPOST /settings/:storeId/invoice-presets/:id/versions/:versionId/restore
Related tables (db-core repositories):
InvoicePreset (best-effort — settings JSON layout, template, status, isDefault)InvoicePresetVersion (best-effort)
Redux slices:
auth (selectedStoreId)
Feature flag key: invoice_builder (requires advanced plan tier or above)
Wrapped in <TierGate feature="invoice_builder" minTier="advanced"> in InvoiceBuilderPage.jsx — the tier check lives in the component itself rather than purely in the nav manifest. Blocks are dragged/resized using native Pointer Events (no external drag-and-drop library) in InvoiceCanvas.jsx. Layout data is versioned (layoutVersion) and passed through normalizeLayout() in defaultLayout.js on load/save so older saved templates stay compatible as new block properties are added. PDF export uses jsPDF's doc.html() renderer against the hidden print-ready DOM node, falling back to the plain browser print window if PDF generation throws.