Svelte

Svelte is a radical new approach to building user interfaces, compiling your components to highly optimized vanilla JavaScript at build time. SvelteKit is its full-stack framework.

Install Translate.website on Svelte / SvelteKit

Building with Svelte or SvelteKit? You don't need to modify your component tree or add any npm packages to make your app multilingual.

By adding the Translate.website script to src/app.html (SvelteKit) or public/index.html (plain Svelte), you can enable automatic translation across every route and page in your app. It's the cleanest, most direct method — no stores, no layout changes, no Svelte component modifications required.

Once set up, Translate.website will automatically detect and translate your content in real time for visitors in different languages.

This guide walks you through the entire setup from start to finish.

Configure Svelte to Enable Translate.website

SvelteKit's src/app.html is the root HTML template for your entire app — the perfect place to inject a global script. Here's exactly how to do it.

Before You Begin

An active Translate.website account with your snippet ready.
A SvelteKit or plain Svelte project.
Access to src/app.html (SvelteKit) or public/index.html (plain Svelte).

Step 01: Get Your Translate.website Snippet

Log in to app.translate.website
Go to Settings → Snippet
Copy the full <script> tag

Translate.website dashboard showing the snippet settings page

Step 02: Add to src/app.html (SvelteKit)

In SvelteKit, src/app.html is the root HTML template that wraps all pages. Adding the script here ensures it loads on every route in your SvelteKit app.

Open src/app.html in your SvelteKit project.
Find the </head> closing tag (look for %sveltekit.head%).
Paste your Translate.website snippet just before </head>.
Save the file.
Plain Svelte (no SvelteKit): Add to the public/index.html file instead.
Alternative for SvelteKit: Add <svelte:head><script>...</script></svelte:head> in +layout.svelte.

SvelteKit src/app.html file with Translate.website script tag added before closing head tag

Step 03: Test Your App

Start your Svelte or SvelteKit dev server and confirm the script is loading.

Run: npm run dev
Open the local dev URL in your browser.
Check DevTools → Network for the Translate.website script.
The translation widget should appear on your Svelte app.

Browser showing Svelte app with Translate.website translation widget visible

🚀 What Happens After Saving?

Translate.website loads alongside your Svelte/SvelteKit app and detects visitor language preferences automatically. It works with SvelteKit's file-based routing and server-side rendering.

No Svelte stores, no Svelte components to modify — the script works independently of your Svelte component tree.

⚠ Recommended: Clear Cache

If you're using a CDN or static hosting in production, clear your cache after deploying to ensure the updated app.html (with the Translate.website script) is served immediately to all visitors.

🔁 Safe & Reversible

This integration is completely reversible. To remove Translate.website from your Svelte app, simply delete the script tag from src/app.html and rebuild. No Svelte components, stores, or layouts were modified.

💡 Why This Method Is Recommended

Works with SvelteKit SSR, SSG, and Svelte SPA modes.
src/app.html is the official SvelteKit way to add global scripts — no workarounds needed.
Zero impact on Svelte's reactivity system or bundle size.
Reversible — remove the script line from app.html to uninstall.

Ready to make your Svelte app multilingual?

Add one line to app.html and every page of your SvelteKit site supports 100+ languages.