Powered by Astro
Install the dependencies.
pnpm installFollowing the Create your email section to define templates and documents.
Use your package manager to build the project.
pnpm buildPreview the built website.
pnpm previewAt the index page of the website, you can copy the title, HTML code. You can also preview what your email looks like in the browser.
For development, run the following command.
pnpm devDefine your email templates (AKA layouts) in src/templates/.
Note
Please use style inline for email HTML, as most email readers don't support external CSS. For example:
<div style={{ color: 'red', fontSize: '16px' }}>Hello, world!</div>You can use Object.assign to merge styles in props passed in.
Then define your email documents using the templates in docs/. You didn't need to pass the props by <Template someProp={someValue}>...</Template>. Use defineProps instead.
---
// docs/reset-password.astro
import Template, { type CommonConfig } from '@/templates/Template.astro'
import defauntConfig from './_config/common.mjs'
export function defineProps(): CommonConfig = {
return Object.assign({}, defaultConfig, {
title: 'Reset your password'
})
}
---
<Template {...Astro.props}>
We received a request to reset your password. Click the link below to reset it.
</Template>The returned value from defineProps will be passed to Astro.props in the document.
By passing Astro.props to the template, you can access the props in the template.
---
// src/templates/Template.astro
export interface CommonConfig {
title: string
}
const config = Astro.props
---
<div>
<h1>{config.title}</h1>
<p><slot /></p>
</div>This is to clarify the props and configuration. If you want to parse some props to configure the DOM item, you can split them.
---
// src/templates/Template.astro
const { target, ...config } = Astro.props
---
<body>
<h1>{config.title}</h1>
<div>
<p><slot /></p>
</div>
<div>
<a href="https://github.com" target={target || '_blank'}>Go to GitHub</a>
</div>
</body>and in docs/reset-password.astro
---
// docs/reset-password.astro
export function defineProps(): CommonConfig = {
return Object.assign({}, defaultConfig, {
title: 'Reset your password'
})
}
---
<Template target="_self" {...Astro.props}>
We received a request to reset your password. Click the link below to reset it.
</Template>Copyright (c) 2025. All rights reserved.
Licensed under the MIT license.