Loading...
A NSW Government website
Search for a command to run...
Create consistent, accessible, and responsive HTML emails using the NSW Email Framework — whether you’re a developer or a designer. The framework uses NSW Design System 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.html and 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 file.tailwind.config.js.images/ folder — they'll be copied to docs/assets/ folder.Perfect 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 Design System framework:
Writing techniques—meaningful links, headings, lists and alt text—that support all readers.
Practical tips for subjects, preheaders, structure and tone that help messages land.
Security-minded build and sending practices that reduce risk and build recipient trust.
Obligations for handling personal information, consent, identification and unsubscribe.
Options for measuring engagement and how to use them transparently and ethically.
Design choices—contrast, size, spacing and image use—that keep emails usable for everyone.
Principles for clear hierarchy, generous spacing and consistent component use.
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.
Email-specific HTML and CSS practices—tables, inlining and testing—for dependable rendering.
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.