How-to guides

Section 1

Free Billing App

Open the app at /tools/free-invoice-generator-south-africa. Everything you save lives in your browser's local storage. Export a JSON backup whenever you finish a session.

Overview

The Billing App generates invoices, quotes and credit notes for South African small businesses. Records are stored on your device — there is no server, no account, and nothing is uploaded. The sidebar gives you these sections:

• Documents — list, create and edit invoices, quotes and credit notes.
• Balances — outstanding amounts per client.
• Company — your business profile that appears on every document.
• Clients — saved customers you bill regularly.
• Saved items — reusable line items for services or products.
• Settings — defaults for currency, VAT mode, document numbering.
• Backup — JSON export, import and full reset.

1. Set up your company

Capture your company details once. They appear on every quote and invoice you generate.

1. Open the Billing App and click Company in the left sidebar.
2. Upload your logo using the logo uploader at the top of the form. PNG, JPG or SVG works best.
3. Fill in the required Business name, plus any of: Registration number, VAT number, Email, Phone, Website and Address.
4. Under Banking details, capture:
   • Bank name
   • Account holder
   • Account number
   • Branch code
5. In Reference format, set how the payment reference appears on invoices, e.g. INV-{number} or {client}.
6. Click Save company details. A "Saved" pill confirms the write.

2. Add your clients

Save clients once and pick them from a list when you create new documents.

1. In the sidebar, click Clients.
2. Click + Add client.
3. Fill in name, email, phone, VAT number, registration number and address.
4. Click Add client to save.
5. To edit later: open Clients, click Edit next to a client, change details, click Save changes.

3. Export your data

A JSON backup is your safety net against browser resets, lost devices, and switching computers.

1. In the sidebar, click Backup.
2. Click Export JSON backup.
3. The browser downloads a single .json file containing your company, clients, documents, saved items and settings.
4. Store the file safely — email it to yourself, save to a cloud drive, or copy to a USB stick.

4. Import a backup

Restore on another device, after a browser reset, or to merge records from a colleague.

1. Open the Billing App on the device where you want to restore.
2. In the sidebar, click Backup.
3. Click Import JSON and select the backup file.
4. The app asks how to apply the backup:
   • OK = Replace — wipe the current workspace and load only the backup.
   • Cancel = Merge — add backup records on top of what is already there.
5. Wait for the "Import complete" message before continuing.

Open the Free Billing App ›

Section 2

Free Payslip Generator

Open the app at /tools/free-payslip-generator-south-africa. Built for spaza shops, farms, domestic employers and small contractors. Data stays in your browser.

Overview

The Payslip Generator produces BCEA-aligned payslips that you can print or save as PDF. The sidebar gives you these sections:

• Payslips — list, create and edit payslips for your workers.
• Employer — your business profile that appears on every payslip.
• Workers — saved employees, pre-filled into new payslips.
• UIF reports — monthly summaries when you have a UIF reference.
• Settings — defaults for the payslip format.
• Backup — JSON export, import and full reset.

1. Set up your employer profile

These details pre-fill into every payslip you generate.

1. Open the Payslip Generator and click Employer in the left sidebar.
2. Fill in Employer name (required) — for example, Khanyi's Spaza Shop.
3. Add the UIF reference number if you are registered (e.g. 1234567/8). Leave blank if not applicable.
4. Capture the Address (required) — street, suburb, town, postal code.
5. Optional: add Phone and Email.
6. Click Save employer details. A "Saved" pill confirms the write.

2. Add your workers

Save each worker once. Their details auto-populate when you create their payslip.

1. In the sidebar, click Workers.
2. Click + Add worker.
3. Fill in the worker's name, ID number, role, hourly or monthly rate, and any standard deductions.
4. Click Save worker.
5. Use Edit or Remove next to each row to update or delete a worker.

3. Export your data

Worker records and payslip history exist only in this browser until you back them up.

1. In the sidebar, click Backup.
2. Click Export JSON backup.
3. The browser downloads a single .json file with your employer profile, workers, payslips and settings.
4. Save it to a cloud drive, email it to yourself, or copy it to external storage.

4. Import a backup

Move data to a new computer or restore after a browser reset.

1. Open the Payslip Generator on the target device.
2. In the sidebar, click Backup.
3. Click Import JSON and pick the backup file.
4. Choose how the backup applies:
   • OK = Replace — overwrite this browser's workspace with the backup.
   • Cancel = Merge — add the backup's records to what is already saved.
5. Wait for the "Import complete" message.

Open the Free Payslip Generator ›

Section 3

Free Project Estimator

Open the app at /tools/free-project-estimator or /tools/estimator-app. It is a browser-only estimation tool for freelancers, agencies, consultants, software projects, tender-style work, retainers, and service delivery. Estimates stay in your browser until you export a backup.

Overview

The estimator is designed to help you build a professional quote from assumptions and work items all the way through to milestones, timeline, graphs, and a printable report. The main areas are:

• Estimates — create a blank estimate or open a worked sample template.
• Project info — client details, rates, dates, VAT, assumptions, exclusions, and default reserves.
• Work breakdown — tasks and phases, each with its own estimate method and rate logic.
• Expenses — supplier-linked expenses, recurring costs, markups, and notes.
• Risks — optional risk register with probability, impact cost, impact hours, mitigation, and reserve inclusion.
• Milestones — billing schedule using percentage milestones, fixed amounts, or a mix of both.
• Timeline — start/end dates, working days, holidays, pinned task dates, and payment dates on the schedule.
• Summary, charts and report — totals, warnings, graphs, and a printable estimate report.
• Settings — your estimator profile, numbering, default rates, VAT, and reserves.
• Backup — JSON export, import and reset, in the same browser-only style as the billing and payslip apps.

1. Build an estimate

Use this order if you are quoting from scratch.

1. Open Estimates and choose either a blank profile or a sample template.
2. Complete Project info: project name, client, dates, base hourly/day rates, VAT, assumptions, exclusions, and dependencies.
3. Build the Work breakdown with phases and tasks. Choose the estimate method per task instead of forcing one method across the whole project.
4. Add Expenses for hosting, licenses, travel, subcontractors, materials, or other direct delivery costs.
5. Add only the Risks that genuinely matter to this estimate. Use the reserve toggle for risks you want included in cost exposure.
6. Set Milestones for deposit, staged billing, and final payment. Use a percentage, a fixed amount, or a mixed structure depending on how the client will be billed.
7. Check Timeline, Summary, Charts, and Report. Then print to PDF or export JSON backup before you leave the browser session.

2. Formula reference

The estimator uses different formulas for different kinds of work. Use the method that best matches how predictable the task really is.

• PERT expected hours — (O + 4M + P) / 6. Use this as the default for custom work where you have an optimistic, most-likely, and pessimistic view. It gives more weight to the most-likely case.
• PERT standard deviation — (P - O) / 6. Use this to judge uncertainty. The wider the gap between optimistic and pessimistic, the more volatile that task is.
• PERT variance — std dev squared. Useful when comparing uncertainty across many tasks or rolling uncertainty up into totals.
• Three-point average — (O + M + P) / 3. Use when you want a quick equal-weight estimate and do not want the PERT weighting bias.
• Triangular — also (O + M + P) / 3 in this tool. Use it as a simpler planning estimate when you still want a range but not the PERT emphasis.
• Weighted estimate — (O × weightO + M × weightM + P × weightP) / totalWeight. Use when your business wants a custom bias, for example a more conservative weighting on the pessimistic case.
• Parametric — quantity × hours per unit. Use for repeatable scope: pages, products, endpoints, branches, interviews, inspections, or migrations.
• Analogous — reference duration × similarity % × complexity multiplier. Use when you have a previous project that is genuinely similar and you want to scale from it.
• Fixed — flat amount with no hours. Use for subcontractor packages, once-off admin fees, permit costs, or delivery items that should not affect labour totals.
• Complexity multiplier — base hours are multiplied by the selected complexity when the toggle is on. Use it when the same task shape exists but the job is clearly low, medium, high, or enterprise complexity.
• Task risk multiplier — line-item hours are multiplied by the task risk multiplier when enabled. Use it sparingly for task-specific uplift, not as a replacement for the risk register.

3. Totals, reserves and milestones

The app turns task, expense, and risk inputs into a commercial total. These are the key formulas you will see reflected in the summary and report:

• Labour cost — adjusted hours × effective rate. The effective rate comes from a task override, a role rate, or the project default hourly rate.
• Base estimate — labour + fixed task costs + expenses subtotal.
• Risk exposure / risk reserve — probability % × impact cost per risk, then summed across included risks.
• Time exposure — probability % × impact hours per risk, useful for schedule awareness.
• Contingency — base estimate × contingency %. Use this for general uncertainty not already captured as an explicit risk.
• Management reserve — base estimate × management reserve %. Use this for sponsor or business-side reserve above working contingency.
• Markup — subtotal before markup × markup %. Use it when you need a selling price above raw delivery cost.
• VAT / tax — subtotal before tax × VAT % when enabled.
• Blended hourly rate — total labour cost / total adjusted hours. Use this to understand the effective rate of the whole estimate across mixed roles.
• Milestone amount — either a fixed amount, a percentage of the project total, or a mixed structure where some milestones are fixed and others are percentage-based.

For billing structure, use percentage milestones when the payment plan is tied to the overall project value, fixed amounts when deposit or stage invoices are contractually fixed, and a mix when you need, for example, a fixed deposit plus percentage-based delivery milestones.

4. Print, export and restore

The estimator is browser-only, so printing and backups are part of normal usage, not optional extras.

1. Use the Report section to review the printable estimate, including assumptions, exclusions, labour breakdown, milestones, and charts.
2. Use your browser's print dialog to Print / Save as PDF when you are ready to issue the estimate.
3. Open Backup and click Export JSON backup to download the full browser workspace.
4. Use Import JSON on another device or after a browser reset. Choose OK = Replace to overwrite the workspace or Cancel = Merge to layer imported records on top of existing ones.
5. Use Demo mode when you want to inspect fictional sample estimates without touching live records. The demo workspace stays separate from your real estimates.

Open the Free Project Estimator ›

Section 4

Email Signature & Template Generator

Open the app at /tools/email-signature-generator or, for the standalone full-window version, /tools/email-signature-app. Everything saves locally in your browser (IndexedDB). Nothing uploads. Export a JSON backup whenever you finish a session.

Overview & two-part design

This tool is bigger than the other generators on the site, so it is designed in two parts that share one project:

• Static generators. The Signature, Branded email and Disclaimer modes are form-driven. You fill in the fields, pick a layout, and copy the rendered email-safe HTML. This is the fastest path to a polished result.
• Designer. A drag-and-drop visual canvas. Reach for it when the static layouts do not give you enough freedom, or when you want a fully custom transactional email body. The Designer reads the same project data, so your name, contact details, social links and accent colour stay in sync.

A single projectcontains your profile (name, contact, company), branding (logo, photo, colours, fonts), social links, a signature template choice, an optional disclaimer block, an optional branded-email template, and an optional Designer canvas. Switching between modes does not lose data — each mode is just a different way of presenting the same project.

1. The four modes

The mode switcher sits on the right of the toolbar. The four modes are:

• Signature. A single-block email signature for the bottom of every message you send. Pick from sixteen layouts, fill in your name, company, contact details and social links, then paste into Gmail, Outlook, Apple Mail or Thunderbird.
• Branded email. A full transactional email body (header banner, intro, services and CTA). Useful for quotes, invoices, welcome notes, payment reminders and other one-off branded emails sent from your normal email client.
• Disclaimer. A standalone confidentiality / POPIA / VAT footer block you can paste under any email. Pick from preset templates (general business, POPIA / privacy, VAT footer, virus warning, legal / medical / financial industry variants) or write your own.
• Designer. A drag-and-drop visual canvas for building any layout from scratch (sections, columns, banners, services grids, signatures, disclaimers and more). Click any text in the canvas to edit it inline.

2. Recommended order for a new project

Always start on the Signature mode. The other modes and the Designer pull from the same project data, so populating it once up front saves you re-typing on every layout you try.

1. Details. Name, job title, company, phone, email, website, address, registration / VAT.
2. Branding. Logo, profile photo, accent colour, font, signature width.
3. Social. Add LinkedIn, X, Instagram, WhatsApp etc.; choose icon mode (text, hosted PNG or base64).
4. Template. Only now pick a layout. Every layout reads the data above, so the preview is instantly populated.
5. Disclaimer (optional). POPIA / VAT / company registration footer.
6. Designer (optional). Switch over only if you want pixel-level control over the layout.

3. Details tab

The Details tab inside the Signature editor captures every field that drives every layout, every preset email template, and every disclaimer.

• Full name. Used on the signature, signature-on-email-body, and as the seed for the initials avatar (when there is no profile photo).
• Job title and Department. Shown under the name on most layouts.
• Company name. Shown next to or under the name. Drives the company registration footer when South African business mode is on.
• Phone, Email, Website, Address. Rendered as contact rows or a pipe-delimited line, depending on the layout. Phone numbers are auto-linked with tel:, emails with mailto:, websites are sanitised before being made clickable.
• Registration number, VAT number. Rendered into the company registration footer when enabled in the Template tab. Required (recommended) for South African Companies Act and POPIA compliance.
• Tagline. A short italic line below the name on layouts that support it.
• CTA label and CTA URL. Adds an action button to layouts and email templates that include one (for example "Book a meeting" pointing to your Calendly).

4. Branding tab

The Branding tab controls colours, fonts, and the visuals that sit alongside your text.

• Logo. Upload a PNG, JPG or SVG. Stored in IndexedDB. Used on layouts that show a logo cell.
• Profile photo. Upload a square portrait. Adjustable size (40–160 px) and shape (round or square corners). When no photo is uploaded, the tool generates an initials avatar from your full name using your accent colour.
• Accent colour. Drives accent stripes, button backgrounds, divider lines, and the initials avatar. Pick a brand colour with enough contrast against white.
• Text colour and Muted colour. The primary and secondary text colours used across all layouts. Defaults are slate-900 and slate-500, which read well in both light and dark email clients.
• Font family. Choose from a list of email-safe font stacks (Arial, Helvetica, Georgia, Verdana, Tahoma, Trebuchet MS, system UI). Web fonts are not used because most email clients strip them.
• Signature width. Most layouts respect 480–600 px. Wider than 600 px tends to break in Outlook on Windows.

5. Social tab

Add the social profiles you want to surface in the signature. The order matters — reorder by drag handle.

1. Pick a platform from the picker (LinkedIn, X / Twitter, Instagram, Facebook, YouTube, GitHub, Behance, Dribbble, Medium, TikTok, Pinterest, WhatsApp, generic Website).
2. Paste the full URL. WhatsApp accepts https://wa.me/<e164>.
3. Use the Customise toggle on each row to override the visible label or add an alt text.
4. Choose the Icon mode (see Section 10). The same icon mode applies to every social row.

6. Template tab (signature layouts)

The Template tab is where you choose your signature layout. There are sixteen layouts, each tuned for a different visual emphasis. The thumbnail strip on the left lets you preview every layout instantly — the same project data is used.

• Logo left, Logo top, Photo card, Minimal, CTA, Corporate, Stacked banner, Vertical bar, Initials monogram, Compact row, Pipe row, Header strip, Business card, Fully centred, Colour stripe + content, Two columns. Read the description under each thumbnail for a one-line summary.

The Template tab also contains the toggles that sit above the layout grid:

• Show logo / Show profile photo. Turn off if a layout has both and you only want one.
• Show social icons. Hide the social row globally without deleting your social links.
• Show tagline. Hide the italic tagline line on layouts that support it.
• Show CTA button. Suppress the call-to-action button even if you have configured a CTA URL.
• Show registration footer. Append a small footer line containing company legal name, registration number and VAT number.
• South African business mode. When on, the tool flags missing VAT number, company registration number and the absence of a POPIA / privacy disclaimer.

7. Disclaimer mode

Disclaimer mode produces a standalone footer block that can be pasted at the bottom of any email or stored as a Gmail / Outlook signature on its own.

• Preset library. Confidentiality, POPIA / privacy, VAT footer, virus warning, plus industry variants for legal, medical and financial. Each preset is a starting point that can be edited in the textarea.
• Custom text. Switch to Custom and write your own wording. Plain text only, with line breaks preserved.
• Embedded into signature. When on, the disclaimer is appended to every signature layout instead of being a standalone block.
• South African footer fields. The company legal name, registration and VAT numbers come from your Details tab. Update them once and the disclaimer regenerates automatically.

8. Branded email mode

Branded email mode produces a full email body, not just a signature. Use it for one-off transactional sends from your regular email client — quote follow-ups, invoices, appointment confirmations, payment reminders, welcome messages, support replies, project updates, and announcements.

1. Pick a preset (General, Quote follow-up, Invoice, Appointment, Welcome, Support reply, Project update, Announcement, Payment reminder, Custom).
2. Edit the subject, preheader (the snippet shown next to the subject in the inbox preview), headline, intro, body paragraphs, services / bullet list, CTA label and URL, and closing.
3. The signature at the bottom of the email reuses the layout you picked in Signature mode. Toggling Show signature off renders just the email body.
4. The disclaimer from Disclaimer mode is appended at the very bottom when its Embedded toggle is on.

The branded email is exported as a single email-safe HTML document (table-based, inline CSS, web-safe fonts, absolute image URLs). Paste it into the body of a new compose window in Gmail or Outlook, or send it through your favourite ESP.

9. Designer mode

Designer mode is a drag-and-drop visual canvas. Use it when the form-driven modes do not give you enough control. The Designer reads your project data so the inline-editable fields (name, company, contact rows, social row, signature ref) stay in sync with the rest of the app.

The canvas

• Centre canvas. Click any block to select it. Drag the handle on the left to reorder. Drop new blocks from the palette.
• Inline editing. Click any text inside a project-data block (name, company, contact line, regulatory line, CTA, heading, paragraph) to edit it directly. Changes are propagated to the rest of the app.

The palette dock

The palette dock at the bottom (or expanded on the right) groups blocks by category:

• Project-data blocks. Name, Company, Tagline, Contact list, Logo, Profile photo, CTA button, Regulatory line, Social row, Signature reference, Disclaimer reference. These reuse data from the Signature mode.
• Free content. Heading, Text, Button, Image, Banner, Services grid — the building blocks for an email body.
• Layout. Section, Columns (1–4), Spacer, Divider.

The properties panel

When a block is selected, the right-hand properties panel groups its settings into accordions:

• Content. The text, image, link or list shown in the block.
• Style. Colour, font size, font weight, alignment.
• Spacing. Padding (top / right / bottom / left, plus an "all sides" shortcut).
• Advanced. Block-specific options (icon size, columns ratio, banner overlay, CTA shape).

Compile pipeline

The Designer compiles its canvas to MJML and then to email-safe HTML on every change. The compile happens entirely in your browser; nothing is uploaded. You can copy the rendered HTML or open a preview in a new tab from the toolbar.

10. Social icon modes (text / hosted / base64)

Email clients render images very differently. The tool offers three icon strategies. The choice you make here affects every social row everywhere in the app.

• Text links (safest). Just styled platform names. Works in every client, never blocked. Smallest HTML.
• Hosted PNGs (recommended). The HTML references PNGs at a public URL like /email-icons/<platform>.png. Outlook (which often blocks base64) handles this best. You must upload the PNGs to a public URL. The bundled set lives at antondevilliers.com/email-icons/ if you want to point at it.
• Base64 embedded (experimental). The icons travel inside the HTML so there is no external host to manage. Some clients (older Outlook on Windows, certain corporate webmails) strip large inline images, so test before relying on this.

11. Copy, download and preview

The toolbar has three primary outputs:

• Copy for email client (or Copy signature / Copy full email in Designer mode). Copies the rendered HTML and a plain-text fallback to your clipboard, ready to paste into a compose window. This is the most common path.
• HTML source. Reveals the raw HTML in a panel so you can copy it into a CMS, an ESP template, or a help-desk macro.
• Plain text. A clean text-only version of the same content for clients that strip rich formatting (or for an SMS-style follow-up).

The Preview in new tab button opens the rendered HTML in a fresh tab so you can sanity-check the result outside the editor (browser zoom, print preview, dark-mode CSS toggle, screen reader walkthrough).

12. Pasting into Gmail, Outlook, Apple Mail

Gmail

1. Click Copy for email client.
2. Open Gmail → Settings (gear icon) → See all settings → Signature.
3. Click into the signature editor and paste. The signature should render with logo, social row and accent colours.
4. Save changes at the bottom of the page.

Outlook (Web / 365)

1. Click Copy for email client.
2. Outlook on the web → Settings (gear) → Mail → Compose and reply → Email signature.
3. Paste into the signature editor and save.

Outlook (Mac / Windows desktop)

1. Click Copy for email client.
2. Open Preferences / Options → Signatures.
3. Create a new signature. Paste. Save.

Apple Mail

1. Mail → Settings → Signatures.
2. Add a new signature. Apple Mail strips most rich formatting on paste — if that happens, use the HTML source output and paste it into a new .html file inside ~/Library/Mail/Vn/MailData/Signatures/ with the corresponding .mailsignature file. (Search the Apple support docs for "Apple Mail HTML signature" for the exact path on your macOS version.)

13. Saved projects, demo and duplicate

Every project is autosaved on change. The Saved projects panel sits at the bottom of the app and lists every project on this device.

• Open. Loads the project into the editor.
• Duplicate. Forks the current project under a new id. Useful if you manage signatures for several staff members or roles.
• Rename. Click the project title in the toolbar.
• Delete. Removes the project from IndexedDB. This cannot be undone — export a JSON backup first.
• New project. Starts a clean project alongside the existing ones.
• Try a demo. Loads a fully populated demo project as a separate workspace. Your previous work stays in the Saved projects panel.

14. Focus mode and Open in new tab

• Focus mode. Hides the surrounding page chrome (navbar, hero, FAQ, footer) and lets the editor fill the browser window. Toggle from the orange Focus mode button in the toolbar; press Esc to leave focus mode.
• Open in new tab. Loads the editor at /tools/email-signature-app?w=1 in a fresh tab in full-window mode. The page wrapper, hero and FAQ are not rendered — just the app. Bookmark this URL if you use the editor often.
• Width toggle. Inside focus mode, switch between Wide (full available width) and Centered (1100–1280 px max) for a more comfortable layout on big screens.

15. Page settings (page background, preheader)

Click Page settings in the toolbar to open the modal. These settings affect the rendered email output, not the editor UI:

• Page background. The colour behind the email card. Defaults to a soft grey. Set to white when sending a signature inside another email body.
• Card background. The colour of the email card itself. Almost always white, but switch to a tinted background for branded campaigns.
• Preheader. The hidden snippet shown next to the subject in the inbox preview (Gmail, Apple Mail, Outlook). Used in branded email mode.

16. JSON export, import and reset

The overflow menu(the … button on the right of the toolbar) holds the backup actions:

• Export project as JSON. Saves a versioned .esg.json file containing the entire project — profile, branding (with logos and avatars as base64), social links, signature template, disclaimer, branded email template, Designer canvas, and page settings.
• Import project from JSON. Accepts a .esg.json file. The importer validates the structure: invalid keys are dropped, HTML or scripts inside text fields are escaped before render, and unsupported asset types are stripped. Imported projects are added alongside existing ones (they do not overwrite).
• Reset template. Clears your template choice and toggles back to defaults. Project data (profile, branding, social) is preserved.
• New project. Creates an empty project. Existing projects stay in the Saved projects panel.

17. Troubleshooting

• The signature looks fine in the preview but breaks in Outlook. Outlook on Windows uses Word as its rendering engine, so it ignores margins on block-level images, web fonts, and many flex / grid declarations. Stick to layouts described as "email-safe" (every layout in this tool is). If you customised your signature in the Designer, make sure block widths total ≤ 600 px.
• Social icons do not appear in the recipient's inbox. If you are using Hosted PNGs, the icons must be reachable at the URL referenced in the HTML. Check that the path returns 200 OK in a private browser window with no cookies. If you are using Base64, switch to Hosted — some Outlook configurations strip large inline images.
• The logo is too big or too small in the email. Set the logo size on the Branding tab (default 90–110 px wide). Avoid uploading a logo larger than 600 px wide; bigger files inflate the HTML.
• The avatar shows initials instead of my photo. Upload a profile photo on the Branding tab and ensure Show profile photo is on in the Template tab.
• The accent colour does not change anywhere. Some layouts (Minimal, Compact row) intentionally do not use accent colour. Switch layout to verify the colour change is being read.
• The Copy button does nothing. Some browsers block clipboard access on insecure pages. Use HTTPS or grant clipboard permission. As a fallback, click HTML source and copy manually.
• I imported a JSON backup and the logo is missing. Logos and profile photos are stored as base64 inside the JSON. If your file was hand-edited or generated by an older version, the asset payload may be invalid. Re-upload the logo on the Branding tab.
• I cannot find my saved projects after clearing browser data. The data lives in IndexedDB on the device. Clearing site data deletes it. Always export a JSON backup before clearing browser storage or switching devices.

Open the Email Signature & Template Generator ›

Section 5

Profit Margin Analyzer

Open the app at /tools/free-profit-margin-calculator or, in standalone full-window mode, /tools/profit-margin-app. It runs entirely in the browser. Pricing projects are saved to IndexedDB on your device — nothing uploads. Export a JSON backup whenever you want to move between machines.

Overview & how it works

The Profit Margin Analyzer answers one core question: at this selling price, after VAT, shipping, duties, labour, packaging, platform fees and overhead allocation, what profit do I actually make? It is a formula-driven pricing engine — not a calculator. Every number on screen is derived from a small set of inputs you control.

• One project per product or service. A project bundles costs, VAT settings, business type, pricing inputs, optional landed-cost block, optional marketing/CAC inputs, optional service hourly rate, competitor list, wholesale tiers and scenarios. Switch between projects from the dashboard.
• Every panel is live. Type into any input — cost, price, target margin, VAT rate — and every result tile, chart and warning recalculates immediately.
• Editor sub-tabs are grouped. Setup (Costs / Landed / Pricing) → Strategy (Marketing / Service / Competitors / Wholesale) → Insights (Break-even / Scenarios / Warnings) → Output (Report). Tabs that don't apply to your business type are hidden by default; tick Show all tabs to see them anyway.

1. Core concepts (cost, margin vs markup, VAT)

Three terms drive everything in this tool. Many small businesses confuse them and lose money:

• Cost. What it costs to produce, buy, import, deliver and sell one unit. Includes supplier price, freight, customs duty, packaging, labour, platform/payment fees, return allowance, overhead allocation and so on.
• Markup %. Profit added on top of cost. Markup = (Selling price ex VAT − Cost) ÷ Cost × 100. Cost R100, sell at R150 → markup 50%.
• Margin %. Profit as a percentage of selling price. Margin = (Selling price ex VAT − Cost) ÷ Selling price ex VAT × 100. Same R100 → R150 sale → margin only 33.33%.

This is the most common pricing mistake on this site: a 50% markup is NOT a 50% margin. The analyzer shows both side-by-side in the results so the difference is unambiguous.

VAT is not your revenue. South African VAT is 15%. The analyzer always computes margin on the ex-VAT price because the inc-VAT amount belongs to SARS, not to you. Cost lines marked VAT inc + Claimablehave their VAT stripped out for VAT-registered businesses. If you're not VAT registered, the inc-VAT amount stays in cost.

2. Business type presets

When you create a new project, pick a preset. Each preset seeds default cost lines and a sensible target margin. Every field stays editable — the preset is just a head start.

• General product/service. Empty starting point — supplier cost, packaging.
• Imported product. Foreign supplier block enabled, plus freight, insurance, clearing fees, local delivery, currency-conversion fee. 35% target margin.
• Local resale product. Supplier, delivery, packaging. 50% target markup (= 33% margin).
• Manufactured product. Per-unit raw materials (with 5% waste seeded), per-unit labour, machine time, per-unit packaging, factory overhead batch line. 100 unit batch. 40% target margin.
• Ecommerce product. Product cost, packaging, courier subsidy, ad cost per order, payment gateway 2.9%, marketplace 10%, return allowance 5%. 35% target margin.
• Wholesale / distributor. Per-unit supplier and packaging, batch freight and warehousing. Seeded with four wholesale tiers (retail / small wholesale / distributor / bulk). 25% target margin.
• Service / project. Labour, subcontractor, software, travel, admin, plus a 5% risk allowance line. 40% target margin.
• Agency / consulting. Billable hours, subcontractor, SaaS, plus 10% admin and 5% risk lines. 45% target margin.

3. Cost breakdown (categories, types, VAT, waste)

The Costs tab is the foundation — every other calculation reads from these lines. Each line has eight columns:

• Label. Free text. Shown in the donut chart and report.
• Category. Supplier, freight, duty, labour, subcontractor, software, packaging, platform fee, payment fee, marketing, overhead, warranty, returns, other. Doesn't affect calculation — only grouping.
• Cost type. Fixed = a one-off batch cost (freight, factory overhead). Per unit= multiplied by the project's unit count (per-item materials). % of selling price = scales with the price (gateway, marketplace, expected return %).
• Amount. The cost in your project currency. For % lines, the percentage instead.
• Qty. Multiplier on this single line — useful when one unit consumes multiple components (e.g. 5 screws × R2 each). Default 1.
• Waste %. Material lost in production. The cost basis becomes amount ÷ (1 − waste%). At 10% waste, R100 of material costs R111.11 because you have to buy more than you actually use.
• VAT (Inc / Claim). Inc = the amount you typed already includes VAT. Claim = your business is VAT registered so the input VAT is reclaimable (cost basis is stripped down to ex VAT). If Inc is checked but Claim isn't, the full inc-VAT amount stays in cost — that's the case for non-VAT-registered businesses.
• Actions. Remove the line.

Every line contributes to the donut chart on the Overview tab, and to the cost breakdown table in the printable report.

4. Landed cost for imports

Skip this section entirely if you buy locally. For imports, tick Enable imported supplier on the Landed cost tab and fill in:

• Supplier currency, unit cost, quantity ordered. From the commercial invoice. Multiplied together and converted to local currency by the exchange rate.
• Exchange rate. Use the bank's effective rate (including their spread) on the day of payment, NOT the spot rate from Google. Banks typically load 1–3% on top.
• Customs duty %. The SARS rate for your HS code. Always counts as cost, never reclaimable.
• Import VAT %. 15% in South Africa. Levied on (customs value + duty + other taxable import costs). If you're VAT registered, this is reclaimable from SARS so it's tracked but NOT counted as cost. If not registered, it becomes part of your cost basis.

Add freight, insurance, clearing and local delivery as separate lines on the Costs tab (one fixed line per shipment cost). The total landed cost = supplier (local) + customs duty + import VAT cost + local cost lines. Per-unit landed cost = total ÷ units.

5. Pricing — drive from price, margin, or markup

The Pricing tab has four price drivers. Type into ANY one of them — the others auto-compute:

• Selling price (ex VAT). Your price excluding VAT. Used in margin calculations.
• Selling price (inc VAT). The shelf or quoted price. Internally divided by (1 + VAT rate) to derive ex VAT.
• Target margin %. Selling price = cost ÷ (1 − margin). A 40% target on R100 cost = R166.67 ex VAT.
• Target markup %. Selling price = cost × (1 + markup). A 40% markup on R100 cost = R140 ex VAT.

The panel header shows the current Source: which driver is in control. Change one and that becomes the new source.

6. Minimum selling price & maximum safe discount

Two of the most valuable numbers in the analyzer:

• Minimum selling price (ex VAT). The lowest price that still hits your target margin AFTER variable selling fees (gateway, marketplace, return allowance) are deducted. Formula: fixed cost ÷ (1 − target margin − variable fee %). If your current price is below this number, you're missing target — even though the headline margin tile might say you're fine.
• Maximum safe discount. The biggest discount you can give before crossing the minimum price. = 1 − (min selling ÷ current selling). Use this every time a customer asks for a discount.

The discount-safety preview at the bottom of the Pricing tab lets you type a proposed discount and see the resulting price + margin instantly — colour-coded green / amber / red.

7. Marketing & CAC (ecommerce)

For ecommerce and direct-response businesses. Visible by default for the Ecommerce preset; tick Show all tabs to see it on other presets.

• Ad spend / month + Orders / month → Ad cost per order (ACPO). What it costs in ads to get one order. If ACPO is R45 and your gross profit per order is R40, you're losing money on ads.
• Marketing spend / month + New customers / month → CAC. Cost to acquire ONE new customer. The right benchmark for repeat-buyer businesses where one customer generates multiple orders over time.
• Profit after CAC = gross profit − CAC. Per acquired customer, assuming they buy one unit. If your customer typically buys multiple times, the real number is higher (LTV territory — outside this MVP).

8. Service hourly rate (agencies)

For agencies, consultants, developers, designers, mechanics, installers. Visible by default for the Service and Agency presets.

• Monthly business cost. Salaries (incl. yours if you draw one), rent, software, insurance, accountant, marketing, admin. Everything you pay regardless of client work.
• Billable hours / month. Hours you can actually invoice — not hours worked. A typical 40-hour week is only 25–28 billable hours after sales, admin, internal meetings, sick days. Be realistic.
• Internal hourly cost = monthly cost ÷ billable hours. The absolute floor — anything you charge below this loses money.
• Charged hourly rate. What you bill the client per hour, ex VAT.
• Gross profit / hour and hourly margin %. Charged − internal. Aim for ≥30% margin to leave a buffer for slow months.

9. Competitor pricing

Manually enter competitor inc-VAT prices (no scraping). For each competitor the analyzer shows your gap (in money and %) and what your margin would be if you matched their price. Use this BEFORE agreeing to a price-match request — if matching drops you below 0% margin, the engine flags it as a danger.

10. Wholesale tiers

Build quantity-based discount bands. Each tier has a min/max quantity and a discount % off your base price. Margin is recomputed per tier. Set a Minimum tier margin % at the top — any tier below this is highlighted red and triggers a warning. A common rule: bulk tiers should never go below half your retail margin.

11. Break-even units & revenue

How many units you need to sell each month to cover your fixed business overhead (rent, salaries, software). The engine computes:

• Contribution margin per unit = selling price ex VAT − total cost (incl. variable fees).
• Break-even units = monthly fixed costs ÷ contribution margin, rounded up.
• Break-even revenue = break-even units × selling price ex VAT.
• Months to break even at expected volume (optional) = break-even units ÷ expected monthly units. If >12 you may not be hitting break-even within a year at your expected sales rate.

The break-even chart visualises the cumulative profit-vs-units curve, with a green marker at the break-even point and a blue marker for your expected volume.

12. Scenario simulator

Stress-test pricing without touching the saved project. Pick a scenario kind, set a value, and see baseline vs scenario side-by-side:

• Cost increase %. Multiplies every cost line by 1+x%. What if my supplier raises prices 12%?
• Price decrease %. Drops the selling price ex VAT by x%. What if I run a 15% promo?
• Apply discount %. Treats the change as a one-off discount on the current price.
• Variable fee +N pp. Adds N percentage points to every % cost line. What if my gateway raises fees by 0.5pp?
• Exchange rate change %. For imported products only — bumps the FX rate. What if the rand weakens 10%?
• Units delta (±). Adjusts the project units count.

13. Warning rules

A rule engine evaluates 15 checks against your project. Severity colour-coding: red (danger — you're losing money), amber (warn — below target or risky), blue (info — heads-up), green (good — pricing looks healthy). The most common warnings:

• Margin below target. Achieved margin is lower than your target margin %.
• Variable fees above 20%. Your gateway + platform + return allowance combined eats more than 20% of every sale.
• Markup vs margin confusion. Both target margin AND target markup are within 1pp of each other — you probably mean one or the other.
• Unsafe discount. Your proposed discount drops the price below the minimum viable selling price.
• Tier below minimum margin. One or more wholesale tiers fall under the minimum tier margin.
• Competitor match at a loss. Matching this competitor would put your margin negative.
• Selling at a loss. Selling price is below total cost — you lose money on every unit.

14. Charts (donut, margin bar, break-even)

Pure inline SVG, no library — work in light/dark mode, on screen and in the printable PDF.

• Cost breakdown donut (Overview + Report). Shows how each cost line and import sub-cost contributes to the total cost. Hover a slice for the exact amount and percentage.
• Margin vs target bar (Overview + Report). Your achieved margin with a tick marker at your target margin %.
• Scenario comparison bars (Scenarios). Baseline vs scenario for selling, cost, gross profit and margin — green/red delta colouring.
• Break-even chart (Break-even + Report). Cumulative profit-vs-units curve, red loss area, green profit area, dashed marker at break-even point, optional blue marker at expected volume.

15. Printable report

The Report tab renders an A4-friendly layout. Click Print / Save as PDFand use your browser's "Save as PDF" in the print dialog. The report includes:

• Cover meta — your name/company/contact, business type, currency, VAT rate, generation date.
• Pricing summary — total cost, selling ex/inc VAT, gross profit, markup, margin, min selling price, max safe discount.
• Visual summary — cost breakdown donut and margin-vs-target bar.
• Cost breakdown table.
• Landed cost section (only if foreign supplier enabled).
• Competitor comparison (only if any added).
• Wholesale tiers (only if any added).
• Break-even section with the cumulative chart.
• Marketing & CAC section (only if populated).
• Service hourly rate section (only if populated).
• Warnings & checks list.
• Notes & assumptions (free-text from the editor).
• Disclaimer.

16. Backup, import, reset

Same pattern as the Billing App and Payslip Generator. From the Backup sidebar tab you can:

• Export JSON backup. Downloads every project + your settings as a single JSON file. Keep regular backups — IndexedDB lives in your browser and disappears if you clear site data.
• Import JSON. Pick a previously-exported file. A native confirm dialog asks OK = replace all data with the backup, Cancel = merge backup into existing data.
• Reset all local data. Wipes every project + settings in this workspace. Two confirmations required.

Demo mode lives in a separate workspace — Backup affects only the active workspace (live or demo).

17. Worked example: importing a lot of 100 units

You're importing 100 Bluetooth speakers from a US supplier at $8.50 each. Exchange rate R18.50, customs duty 20%, freight + insurance R3 600, clearing R1 800, local delivery R900. You're VAT registered. Target 40% margin.

1. Create a new project, pick the Imported product preset.
2. On the Landed cost tab, set supplier currency USD, unit cost 8.5, quantity 100, exchange rate 18.5, duty 20%, import VAT 15%.
3. On the Costs tab, fill in: Freight R3 600, Insurance R0 (or merge into freight), Clearing R1 800, Local delivery R900.
4. Open Pricing. Confirm units = 100. Set target margin 40%.
5. Read the result: per-unit landed cost ≈ R220, target selling price ≈ R366 ex VAT. Min selling price (with no variable fees) matches.
6. Switch to Scenarios. Try Exchange rate change % = +10. Watch margin drop. Try Cost increase % = +12 (supplier raises prices). Compare to baseline.
7. Open Break-even. If your monthly fixed overhead is R30 000, see how many speakers you need to sell each month.
8. Open Report, print, save as PDF for your records or to share with a partner.

18. Worked example: pricing an ecommerce product

You sell a R599 (inc VAT) skincare set on Shopify with Yoco gateway. Product cost R220, packaging R28, courier subsidy R65, ad cost per order R45. Target margin 38%.

1. New project → Ecommerce product preset. The seeded cost lines already include payment gateway 2.9%, marketplace 10%, return allowance 5%.
2. Adjust the seeded amounts to match your actual cost.
3. On the Pricing tab, type 599 into Selling price (inc VAT). Read the resulting margin %. Compare to your 38% target.
4. If margin is below target, look at the Min selling (inc VAT) tile — that's the price you'd need to charge to hit 38% AFTER all the % fees.
5. Open the Marketing & CAC tab. Enter monthly ad spend (e.g. R12 000), monthly orders (e.g. 200), monthly marketing spend (e.g. R15 000), new customers (e.g. 80). Profit after CAC tells you whether marketing is paying off per customer.
6. Open the Overview tab. The cost breakdown donut visually shows where your R599 goes — usually a sobering picture for ecommerce sellers.

19. Worked example: agency project quote

You're quoting a 3-week Webflow build. Internal team time R18 000, freelance designer R6 000, software/SaaS R1 200. Target 45% margin, total billable price ex VAT R48 000.

1. New project → Agency / consulting preset.
2. On the Costs tab, fill in the three labour/subcontractor/software lines. The seeded admin 10% and risk 5% lines (% of selling price) stay.
3. On the Pricing tab, type 48000 into Selling price (ex VAT). Read the resulting margin and the gap vs your 45% target.
4. Open the Service rate tab. Enter your monthly business cost (e.g. R80 000) and billable hours (e.g. 100) → internal hourly cost ≈ R800. Enter your charged hourly rate (e.g. R1 200) and read the margin per hour.
5. Use that internal hourly cost to sanity-check the labour cost line on the Costs tab — does it actually reflect what your team costs you?
6. Switch to Scenarios. Try a Price decrease 10% to model what happens if the client negotiates.
7. Open Report, print, save as PDF, send to the client as the back-up to your quote.

20. FAQ specific to this tool

Why does the donut show different categories than my cost lines?

The donut groups by category(supplier, freight, duty, packaging, etc.), not by individual line. Two supplier lines combine into one slice. Imports add separate slices for "Foreign supplier (local)", "Customs duty" and "Import VAT (cost)" when applicable.

Why is my margin lower than my markup target?

Because they measure different things. A 40% markup yields only a 28.6% margin. If you want a 40% margin, set the target margin % driver, not target markup.

Variable fees shouldn't affect total cost — why does the analyzer add them in?

The Total cost (ex VAT) tile in the Pricing tab includes variable fees valued at the current selling price, so the resulting margin is the real margin you keep. The Costs tab table itself shows the % rate (e.g. 2.9% for Yoco) — the actual rand impact only appears in calculations because it depends on price.

Can I track multiple products in one project?

No — one project per product/service. Use the dashboard to switch between projects. Duplicate a project to start from a similar pricing structure.

Does the analyzer talk to SARS, my bank, or any external service?

No. Everything is local — formulas, IndexedDB, your browser. No API calls, no AI, no live exchange rate or duty lookups. You enter everything yourself.

I changed the VAT rate but my old projects still show 15%.

Settings affect new projects only. Open each existing project and change the VAT rate field on the Pricing tab.

Open the Profit Margin Analyzer ›

Section 6

FAQ

Where is my data stored?

In this browser only — IndexedDB and localStorage on the device you are using. Nothing is uploaded. If you clear your browser's site data, the records are gone unless you exported a backup.

Can I use the same backup file in both apps?

No. The Billing App, Payslip Generator, and Project Estimator each have their own backup format. Import each backup into the matching app only.

What is Demo mode?

Demo mode loads sample data into a separate workspace so you can explore the app without touching your real records. Toggle it from the sidebar. Switch off when you want to return to your live data.

How do I move to a new computer?

On the old device, open the relevant app, go to Backup, and Export JSON. On the new device, open the same app, go to Backup, Import JSON and choose Replace.