Svelte Integration

In-App Notifications for Svelte Apps

Add a notification widget to your Svelte or SvelteKit app with one script tag. No Svelte SDK needed. Initialize in onMount, send from your backend, and deliver in real time via SSE. Lightweight like Svelte itself.

Get Started Free Learn More

Why Notilayer for Svelte

Built to feel native in Svelte projects

No heavy dependencies. No framework lock-in. Just a script tag that works with Svelte's minimal philosophy.

No SDK to install

One script tag in app.html. No npm package, no Svelte wrapper, no build step changes. Keep your bundle lean.

Shadow DOM isolation

Widget renders in a Shadow DOM. Svelte's scoped styles, global CSS, and Tailwind classes will never conflict with the notification widget.

onMount lifecycle

Initialize in Svelte's onMount hook. The widget auto-connects to SSE for real-time notification delivery.

SvelteKit ready

Works with SvelteKit's SSR and SPA modes. Add to app.html, initialize in +layout.svelte, and you are done.

Lightweight by design

External async script. Zero impact on your Svelte bundle size. Matches Svelte's philosophy of shipping less JavaScript.

Auto-updates

The widget script is always the latest version. No npm update commands, no version pinning, no breaking changes to chase.

Step 1

Add the script tag to app.html

Open your src/app.html file and add the Notilayer widget script before the closing body tag. This is the HTML template that SvelteKit uses for every page. For plain Svelte with Vite, add it to your index.html instead.

One line of HTML. No npm install.
Loads asynchronously with defer. No render blocking.
Persists across SvelteKit client-side navigations.

src/app.html

app.html

<!-- src/app.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
  </head>
  <body>
    <div id="svelte">%sveltekit.body%</div>
    <script
      src="https://api.notilayer.com/widget/widget.js"
      defer
    ></script>
  </body>
</html>

src/routes/+layout.svelte

+layout.svelte

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte'

  onMount(() => {
    window.Notilayer.init({
      projectId: 'YOUR_APP_ID',
      userId: currentUser.id,
    })
  })
</script>

<slot />

Step 2

Initialize in onMount

Import onMount from Svelte and call window.Notilayer.init() with your project ID and user ID. This ensures the widget connects only on the client side, after the component mounts. Place it in your root +layout.svelte so it runs once for the entire app.

onMount runs only in the browser -- safe for SSR
Pass your user ID to show personalized notifications
SSE connection opens automatically after init

Step 3

Send from your backend

Trigger notifications from any backend -- Node.js, Python, Go, or SvelteKit server routes. Make a POST request to the Notilayer API with the user ID, title, and body. The notification appears in the user's bell widget instantly via SSE.

Works with SvelteKit API routes

Call the Notilayer API from +server.ts endpoints or server-side load functions.

Any language, any backend

REST API works from Node.js, Python, Ruby, Go, or any language that speaks HTTP.

Real-time delivery

Notifications appear instantly in the Svelte app. No polling, no WebSocket setup.

Backend API call

server.js

// Send a notification from your backend
const res = await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.NOTILAYER_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    userId: 'user_123',
    title: 'New comment on your post',
    body: 'Sarah replied to your thread.',
  }),
})

Compatibility

Works across the Svelte ecosystem

The widget is framework-agnostic by design. It works seamlessly with every Svelte project setup.

Svelte 4 & 5

Works with both Svelte 4 and Svelte 5 (runes mode). The widget does not depend on Svelte internals -- it is a standalone script.

SvelteKit

Add to app.html, initialize in +layout.svelte. Works with SSR, CSR, and prerendered pages. Survives client-side navigation.

Vite + Svelte

Using Svelte without SvelteKit? Add the script tag to index.html. Same behavior, same onMount initialization.

FAQ

Svelte integration questions

Do I need a Svelte package for Notilayer?

No. Notilayer loads via a single script tag added to your app.html file. There is no Svelte-specific SDK or npm package to install. The widget is framework-agnostic and works with any Svelte or SvelteKit project out of the box.

Does Notilayer work with SvelteKit?

Yes. Add the script tag to src/app.html, which is SvelteKit's HTML template. The widget loads after the page renders. Use onMount in a +layout.svelte or +page.svelte file to initialize and identify users. It works with both SSR and SPA modes.

Will the widget conflict with Svelte's scoped styles?

No. The Notilayer widget renders inside a Shadow DOM, which provides complete CSS isolation. Svelte's scoped component styles, global stylesheets, and any CSS framework you use will not leak into the widget, and the widget will not affect your app's styling.

How do I show notifications in real time with Svelte?

Once the widget is initialized with a user ID, Notilayer opens an SSE (Server-Sent Events) connection automatically. New notifications appear in the bell widget in real time without any additional Svelte code. Send notifications from your backend via the REST API and they are delivered instantly.

Explore more: Home · Vue Notifications · Angular Notifications · React Bell · Next.js Notifications

Add Notifications to Your Svelte App

One script tag. No Svelte SDK. Real-time delivery. Free plan included.

Get Started Free View Pricing