Access and setup

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.

Who this guide is for

Developers

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.

Designers and content authors

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.

Access and downloads

Steps to download:

• Sign in with a NSW Government Microsoft SSO account.
• Go to your Dashboard → Downloads.
• Download the latest release package (ZIP).
• Unzip the package on your computer.

Option A — Development workflow

Prerequisites

• Node.js (version 18+)
• npm (installed with Node.js)
• Command-line access

Install dependencies

Open your terminal, navigate to the unzipped project folder, and run:

npm install

Start the dev server

Launch a local watcher that compiles your templates in real time:

npm run dev

Compiled emails will be written to the docs/ directory. Open these files in your browser to preview the output.

Project structure

The project is organised into these folders:

• components/ – Reusable UI elements (buttons, spacers and dividers)
• layouts/ – Base layout wrappers using table scaffolding
• emails/ – Component demo pages and test files
• templates/ – Starter templates (e.g. welcome, announcement)
• docs/ – Compiled output for dev and production

Create a new template

Follow these steps to create a new email template:

• Duplicate a folder in templates/ or create a new one.
• Rename the folder to match your new template's purpose.
• Edit the 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.

Build for production

When you're ready to finalise your email:

npm run build

This command creates minified, email-ready HTML with inlined styles, saved in thedocs/ folder.

Customise as needed

• Design tokens: Adjust styles in config.js or lib/
• Global styles: Modify the main.css file
• Tailwind CSS: Add or change utilities in tailwind.config.js
• Component styles: Update individual component styles as needed
• Images: Place assets in the images/ folder — they'll be copied to docs/assets/ folder

Option B — No install required (copy and paste)

Perfect for quick tasks, email mockups, or non-technical users.

Explore prebuilt examples

Browse available components:

• Layouts – Responsive wrappers for emails
• Components – UI elements like buttons and footers
• Blocks – Common email sections (e.g. hero, text + image)
• Templates – Predefined email structures

Copy the HTML snippet

If you are signed in to your account each example includes a “Copy” button or selectable HTML.

Download the starter file

From Dashboard → Downloads, get the Starter HTML file. Open it in your preferred code editor.

Paste and customise

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>

Preview your email

Open the file in your browser for a quick check. For more accuracy, test in email clients like Outlook or Gmail.

Next steps

Explore the following sections to deepen your knowledge and make the most of the NSW Email Toolkit framework: