# Svelte Website Translation and Localization | Vitra.ai > Localize Svelte website and interface content while preserving components, routes, application structure, and performance. **Canonical URL**: https://www.vitra.ai/integration/svelte **Source**: This is the Markdown rendering of https://www.vitra.ai/integration/svelte, generated at build time from that page. --- [←All integrations](https://www.vitra.ai/integrations) Svelte Translation Browse ▾ [←All integrations](https://www.vitra.ai/integrations) ![](https://www.vitra.ai/icons/integrations/svelte.svg) # Svelte Svelte is a modern JavaScript framework for building fast user interfaces. It compiles code at build time for better performance. [Connect](https://universe.vitra.ai) ## Use Universe Website Translation on a Svelte Website If your project is built with Svelte, Universe Website Translation can be enabled by adding one lightweight script globally so it loads on every page. No backend changes. No routing changes. Just a safe global integration. ![Use Universe Website Translation on a Svelte Website](https://www.vitra.ai/static/images/integration/shared/js-overview.png) ![](https://www.vitra.ai/static/images/integration/svelte/overview-2.png) ## Setup for Svelte ### Step 1: Open Your Base Template Navigate to your svelte project and open: `src/app.html (Or the main template file that contains the global section.) ### Step 2: Locate the Section Find: ### Step 3: Paste the Vitra Snippet Just above , paste your Vitra / Universe Website Translation snippet. Example ``` /* Paste Vitra Snippet Here */ ``` ### Step 4: Save & Restart Save the file and restart your svelte server: python manage.py runserver ![Step 4: Save & Restart](https://www.vitra.ai/static/images/integration/svelte/step-4.png) ## Important for Svelte (SPA + SSR) Svelte/SvelteKit apps: - render dynamically - use client-side navigation - may use SSR (SvelteKit) So the snippet must be: - Global (index/app.html or root layout) - Not inside a single component/page ## What Happens After Setup? Once active, Universe Website Translation: - Translates Svelte-rendered content - Works across navigation without reload - Detects dynamic DOM updates - Preserves layout & styling ## Safe & Reversible To disable: - Remove the snippet from index.html / app.html - Rebuild / redeploy ## Where to go next Svelte Website Translation and Localization is one way into Vitra.ai. Website translation is the capability doing the work behind it. [CapabilityWebsite translation](https://www.vitra.ai/features/website-translation)[Read nextTranslate a Svelte or SvelteKit App](https://www.vitra.ai/general/translate-a-svelte-app)[Read nextContinuous localization for always-on content](https://www.vitra.ai/general/continuous-localization) Browse every connector on the [integrations directory](https://www.vitra.ai/integrations). --- ## Structured data ```json { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Svelte Website Translation and Localization integration", "applicationCategory": "BusinessApplication", "operatingSystem": "Web", "url": "https://www.vitra.ai/integration/svelte", "description": "Localize Svelte website and interface content while preserving components, routes, application structure, and performance.", "featureList": [ "If your project is built with Svelte, Universe Website Translation can be enabled by adding one lightweight script globally so it loads on every page.", "No backend changes.", "No routing changes.", "Just a safe global integration." ], "isPartOf": { "@type": "SoftwareApplication", "name": "Vitra Universe", "url": "https://www.vitra.ai" }, "publisher": { "@id": "https://www.vitra.ai/#organization" } } ``` ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.vitra.ai" }, { "@type": "ListItem", "position": 2, "name": "Integrations", "item": "https://www.vitra.ai/integrations" }, { "@type": "ListItem", "position": 3, "name": "Svelte Website Translation and Localization integration", "item": "https://www.vitra.ai/integration/svelte" } ] } ```