docs/framework/content/svelte-email.mdx
Integrating Novu Framework with Svelte email for your Svelte application can be done in three steps. If you don't have an app, you can clone our Svelte example.
<Steps> <Step title="Install Svelte email components"> ```bash npm install svelte-email ``` </Step> <Step title="Create email templates folder"> Create a new folder called `emails` in your `src` folder. </Step> <Step title="Write your email"> Create a new file called `test-email.svelte` in your `emails` folder.```svelte
<script lang="ts">
export let name: string;
</script>
<Html>
<Head />
<Preview>Welcome to Svelte Email</Preview>
<Body>
<Container>
<h1>Welcome, {name}!</h1>
<p>Thanks for trying Svelte Email. We're thrilled to have you on board.</p>
</Container>
</Body>
</Html>
```
Create a new file called `test-email.ts` in your `emails` folder.
```typescript
export function renderEmail(name: string) {
return render({
template: TestEmail,
props: {
name,
},
});
}
```
```typescript
export const testWorkflow = workflow('test-workflow', async ({ step, payload }) => {
await step.email('send-email', async (controls) => {
return {
subject: controls.subject,
body: renderEmail(payload.userName),
};
},
{
controlSchema: z.object({
subject: z.string().default('A Successful Test on Novu from {{userName}}'),
}),
});
}, {
payloadSchema: z.object({
userName: z.string().default('John Doe'),
}),
});
```