> ## Documentation Index > Fetch the complete documentation index at: https://v0.x-docs.novu.co/llms.txt > Use this file to discover all available pages before exploring further. # How to send notifications with Svelte and Svelte email > Learn how to send email notifications with Svelte, Svelte email and Novu # Introduction Learn how to send notifications with Svelte, Svelte email and Novu. You can check out the complete code for a [working app](https://github.com/novuhq/novu-svelte-email). ## Prerequisites * A Novu account * Node installed on your machine * A working SvelteKit app ## Follow these Steps ### 1. Install all dependencies ```jsx theme={null} npm install @novu/framework svelte-email ``` ### 2. Integrate Novu with SvelteKit Within the `src/routes` directory, create an `api/novu` folder and add a `+server.ts` file to it. ```jsx theme={null} // src/routes/api/novu/+server.ts import { svelteWorkflow, client } from '$lib/novu/workflows'; import { serve } from '@novu/framework/sveltekit'; export const { GET, POST, PUT } = serve({ client: client, workflows: [svelteWorkflow] }); ``` ### 3. Create an email template in Svelte Within the `src/lib` directory, create an `emails` folder and add an email template in a `.svelte` file to it. For example, `airbnb-review.svelte`: ```ts theme={null} // src/lib/emails/airbnb-review.svelte
{#if showLogoImage} Airbnb {/if}
{authorName}
Here's what {authorName} wrote {reviewText} Now that the review period is over, we’ve posted {authorName}’s review to your Airbnb profile. While it’s too late to write a review of your own, you can send your feedback to {authorName} using your Airbnb message thread.
{#if showFeedbackButton} {/if}
Common questions How do reviews work? How do star ratings work? Can I leave a review after 14 days?
{bottomAddress} Report unsafe behavior
``` ### 4. Create a Novu Workflow Next, create a Novu workflow with an email step. This code-first notification workflow approach makes it easy for product teams to modify notification content. ```jsx theme={null} // src/lib/novu/workflows.ts import { Client, workflow } from '@novu/framework'; import { render } from 'svelte-email'; import AirbnbReview from '$lib/emails/airbnb-review.svelte'; export const client = new Client({ /** * The Novu API key is needed for when you * need to sync to Novu Cloud */ apiKey: process.env.NOVU_API_KEY, /** * Disable this flag only during local development * For production this should be true */ strictAuthentication: process.env.NODE_ENV !== "development" }); export const svelteWorkflow = workflow('airbnb-review', async ({ step, payload }) => { await step.email( 'send-email', async (inputs) => { const html = render({ template: AirbnbReview, props: { authorName: inputs.authorName, showFeedbackButton: inputs.showFeedbackButton, showLogoImage: inputs.showLogoImage, feedbackButtonText: inputs.feedbackButtonText, bottomAddress: inputs.bottomAddress, authorImage: inputs.authorImage, logoImage: inputs.logoImage }, }); return { subject: `Here's Your Host Feedback`, body: html, } }, { inputSchema: { type: "object", properties: { showFeedbackButton: { type: "boolean", default: true }, showLogoImage: { type: "boolean", default: true }, authorName: { type: "string", default: "Alex" }, feedbackButtonText: { type: "string", default: "Send My Feedback" }, authorImage: { type: "string", default: "https://react-email-demo-bdj5iju9r-resend.vercel.app/static/vercel-user.png", format: "uri", }, logoImage: { type: "string", default: "https://svelte-email-rjaapma15-konzeptfabrik.vercel.app/airbnb-logo.png", format: "uri", }, bottomAddress: { type: "string", default: "Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103", }, }, }, }); } ); ``` ### 5. Preview Email Workflow & Sync to Novu Cloud Open Dev Studio to preview and make changes to the email workflow as needed via the command below: ```jsx theme={null} npx novu-labs@latest echo ``` 1. Run the Studio **Note:** Use the port on which your Svelte app is running for the Bridge endpoint so that the Novu Dev Studio can connect to your API route. 2. Check out the email workflow and test 3. Deploy to Novu Cloud when you're done. On the top right of the Novu Dev Studio, you can sync to Novu Cloud when you're done working locally. **Note:** You'll need to create a local tunnel that the Novu Cloud environment can reach for local experimentation purposes. Ngrok is a good tunnel. ### 6. Send a Notification Trigger a notification using the recently deployed workflow either via your [Novu Cloud dashboard](https://web.novu.co) or [code](/quickstarts/react#trigger-a-notification). Once you've built the workflow, you might want read one of [our other guides](/guides/framework-guides/product) on how to empower product teams to manage notification workflows.