# Svelte Email Integration (/framework/content/svelte-email) Learn how to use Svelte Email to build beautiful email templates Integrating Novu Framework with [Svelte email](https://react.email/) for your Svelte application can be done in three steps. If you don't have an app, you can [clone our Svelte example](https://github.com/novuhq/novu-svelte-email). Install the required Svelte email components. ```bash npm install svelte-email ``` Create a new folder called `emails` in your `src` folder. Create a new file called `test-email.svelte` in your `emails` folder. ```svelte Welcome to Svelte Email

Welcome, {name}!

Thanks for trying Svelte Email. We're thrilled to have you on board.

``` Create a new file called `test-email.ts` in your `emails` folder. ```typescript import { render } from 'svelte-email'; import TestEmail from './test-email.svelte'; export function renderEmail(name: string) { return render({ template: TestEmail, props: { name, }, }); } ``` Define your workflow using the above template ```typescript import { workflow } from '@novu/framework'; import { renderEmail } from './emails/test-email'; import { z } from 'zod'; 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'), }), }); ```