User manual

How-to guides

Step-by-step instructions for the Free Billing App, the Free Payslip Generator, the Free Project Estimator, and the Email Signature & Template Generator. Set up your business profile, build email-safe signatures and branded emails, understand the estimator formulas, manage records, and back up your data with JSON export and import.

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.
Tip. Once your company is saved, every new invoice, quote and credit note you create will use these details automatically.

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.
Saved items. The Saved items tab lets you store reusable line items (services, products, recurring charges) that you can drop into any invoice or quote.

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.
Recommended. Export at the end of every working session. The file is small and the only copy of your data lives in this browser until you back it up.

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.
Reset all data. The Backup tab also has a Reset all local databutton. It wipes everything in this browser's workspace and asks for two confirmations. Use only after you have exported a backup.

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.
UIF reports. If you provide a UIF reference number, the UIF reports tab can generate monthly reports for your records.

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.
BCEA-aligned. The payslip template is structured for the South African Basic Conditions of Employment Act. Fields are kept simple for spaza shops, farms, domestic employers and small contractors.

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.
Recommended. Export after each pay run so you always have a copy of payslips you have issued.

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.
Reset all data. The Backup tab also has Reset all local data. It wipes the employer, workers, payslips and settings in this browser. Two confirmations are required. Always export a backup first.

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.
Practical default. If you are unsure which estimate method to start with, use PERT for custom work, Parametric for repeatable units like pages or endpoints, and Fixed only for flat-fee items that should not create hours.

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 variancestd 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.
  • Parametricquantity × hours per unit. Use for repeatable scope: pages, products, endpoints, branches, interviews, inspections, or migrations.
  • Analogousreference 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.
Where to use which method. Use PERT for custom delivery, discovery, QA, and uncertain project work. Use Parametric for units you can count. Use Analogous when you have past data. Use Fixed for flat-fee or external-cost items. Use Weighted only when your team already agrees on the weighting logic.

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 costadjusted 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 reserveprobability % × impact cost per risk, then summed across included risks.
  • Time exposureprobability % × impact hours per risk, useful for schedule awareness.
  • Contingencybase estimate × contingency %. Use this for general uncertainty not already captured as an explicit risk.
  • Management reservebase estimate × management reserve %. Use this for sponsor or business-side reserve above working contingency.
  • Markupsubtotal before markup × markup %. Use it when you need a selling price above raw delivery cost.
  • VAT / taxsubtotal before tax × VAT % when enabled.
  • Blended hourly ratetotal 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.

Warnings panel. The estimator runs rule-based checks against your estimate and flags missing items like QA, deployment, contingency, acceptance criteria, milestones coverage, or timelines that are too short for the hours quoted.

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.
Important. Just like the billing and payslip apps, estimator records live in this browser only until you export them. If you clear site data without a backup, your estimates are gone.

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.

First time? Try the demo. The demo project is fully populated, so you can see how every tab and mode behaves before typing your own data. From the toolbar, click Try a demo. Your work is preserved in the Saved projects panel at the bottom of the app.

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.

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.
Already in the Designer and noticed wrong details? Most fields (name, contact lines, social links, accent colour) can be edited inline by clicking text in the canvas. For deeper changes like swapping the logo, regenerating the avatar, changing company registration / VAT, or changing disclaimer mode, jump back to the Signature mode, update there, and the Designer canvas updates automatically.

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.
Disclaimer note. The legal disclaimer templates are general business starting points, not legal advice. Have a qualified professional review the wording before relying on it for compliance.

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 settingsSignature.
  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) → MailCompose and replyEmail signature.
  3. Paste into the signature editor and save.

Outlook (Mac / Windows desktop)

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

Apple Mail

  1. Mail → SettingsSignatures.
  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.
Important. Project data lives in this browser only. If you clear browser site data or move to a new machine without exporting, the projects are gone. Export a JSON backup at the end of every session.

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

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.