Loading...
Loading...
A NSW Government website
Search for a command to run...
Loading...
Create consistent, accessible, and responsive HTML emails using the NSW Email Toolkit – whether you’re a developer or a designer. The framework uses design tokens and is built on Maizzle and Tailwind CSS. It includes reusable components, layouts, templates, and tools for prototyping or production-ready email development.
You can install the framework, start a development server, and generate optimised HTML emails with inlined CSS. This process suits advanced workflows and allows you to create new templates using reusable components.
You can use the framework without installing it. Just copy precompiled code snippets from the website and paste them into a starter HTML file. It’s a quick and flexible option for prototyping or building simple emails.
Open your terminal, navigate to the unzipped project folder, and run:
npm installLaunch a local watcher that compiles your templates in real time:
npm run devCompiled emails will be written to the docs/ directory. Open these files in your browser to preview the output.
The project is organised into these folders:
components/– Reusable UI elements (buttons, spacer, dividers etc.)layouts/– Base layout wrappers using table scaffoldingemails/– Component demo pages and test filestemplates/– Starter templates (e.g. welcome, announcement)docs/– Compiled output for dev and productionFollow these steps to create a new email template:
templates/ or create a new one.index.htmland use the framework's custom tags to build your layout.<x-main>
<x-header title="Welcome" />
<x-section>
<x-text>Thanks for joining us.</x-text>
<x-button.solid value="Read more" align="center" />
</x-section>
<x-footer />
</x-main>The dev server will recompile and update the output in docs/<your-template>/index.html.
When you're ready to finalise your email:
npm run buildThis command creates minified, email–ready HTML with inlined styles, saved in thedocs/ folder.
config.js or lib/main.css filetailwind.config.jsimages/folder — they'll be copied to docs/assets/ folderPerfect for quick tasks, email mockups, or non–technical users.
Browse available components:
If you are signed in to your account each example includes a “Copy” button or selectable HTML.
From Dashboard → Downloads, get the Starter HTML file. Open it in your preferred code editor.
Paste your copied snippet inside the <body> section of the starter HTML and edit as needed.
Example structure:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome</title>
</head>
<body>
<!-- Paste snippet here -->
</body>
</html>Open the file in your browser for a quick check. For more accuracy, test in email clients like Outlook or Gmail.
Explore the following sections to deepen your knowledge and make the most of the NSW Email Toolkit framework:
Writing techniques – meaningful links, headings, lists and alt text – that support all readers.
Writing for email with practical guidance on subject lines, preheaders, structure, tone and plain English.
Security-minded build and sending practices that reduce risk and build recipient trust.
Email privacy guidance for consent, identification, unsubscribe flows and handling personal information.
Email tracking guidance for analytics, open pixels, click measurement and privacy-by-design decisions.
Design choices – contrast, size, spacing and image use – that keep emails usable for everyone.
Email design best practices for hierarchy, spacing, brand clarity and accessible layouts.
How to choose, crop and compress images and icons without harming accessibility.
Techniques for semantic structure, alt text, focus order and colour contrast in email.
HTML email development best practices for tables, inlining, testing and cross-client compatibility.
Where to start, the standards to follow and how reviews work for updates.
A high-level map of the project so you can navigate tokens, components and templates.
Planned improvements and areas where contributions are most useful.
Version-by-version release history generated from the repository changelog.