Framer multilingual: how to add languages to your Framer site (2026)

Framer's built-in localization

Framer has a native Localization feature available in site settings. Once enabled, you add locale variants to your project — for example English, French, and German — and Framer creates per-locale versions of each page inside the designer. You then translate text layer by layer, either by typing directly or by importing translated content.

The primary advantage of Framer Localization is its tight integration with the platform. Translated pages are published to locale-prefixed URLs out of the box (/fr/, /de/) and Framer handles the routing automatically. Framer CMS collections can have locale-specific entries, giving you full editorial control per language.

There are, however, meaningful trade-offs to consider:

Automatic translation with a script tag

A DOM-based translation widget takes a fundamentally different approach. Instead of managing translations inside Framer, it translates the published site automatically — observing rendered text in the browser and replacing it with the target language in real time.

You add a single script tag to Framer via Site Settings → General → Custom Code → End of body. From that point, every page, CMS collection, and component is covered without any design changes or per-locale duplication.

Step-by-step: add Lingvit to your Framer site

1. 1

   Create a Lingvit project

   Sign up at app.lingvit.com, create a new project, and enter your Framer site's domain. Copy the script tag from the project settings.

2. 2

   Open Framer Custom Code settings

   In Framer, go to Site Settings → General → Custom Code and find the End of body field.

3. 3

   Paste the script tag

   Paste your Lingvit project script into the End of body field. It looks like:

   <script src="https://cdn.lingvit.com/widget/v1/widget.bundle.js"
     data-project-id="YOUR_PROJECT_ID"
     defer
   ></script>

4. 4

   Publish your Framer site

   Click Publish in the Framer toolbar. The script is now live on your published site.

5. 5

   Select languages in the Lingvit dashboard

   Back in the Lingvit dashboard, choose your target languages. The language switcher appears on your live Framer site immediately. Translations are generated when first requested and stored for reuse thereafter. Generation and delivery timing depend on the page, browser, network, and provider response.

Framer CMS and translation

Framer CMS content — blog posts, case studies, team members, product listings — is bound to page elements dynamically. When Framer renders a CMS collection page, the data becomes part of the DOM just like any other text on the page.

The automatic translation approach observes the rendered DOM rather than reading Framer's internal data model. This means CMS-bound text is captured and translated automatically, with no extra configuration. Every blog post, every collection item, every dynamically populated field is included.

With Framer Localization, by contrast, CMS items need duplicate entries for each locale. A blog post in English and French requires two CMS items — you write and maintain both. For teams publishing frequently, this per-locale duplication becomes a significant editorial overhead.

Which approach fits your project?

Scroll horizontally to view every column.

Choose Framer Localization if you need fully server-rendered multilingual pages, require per-locale images or locale-specific CMS entries, and are already on a Framer Pro plan with the editorial resources to maintain each locale.

Choose automatic translation if you want to go live in multiple languages quickly, with no design duplication and no per-locale CMS overhead. It is especially well-suited to marketing sites, portfolios, and SaaS landing pages where time to market matters more than server-rendered locale routing.

Frequently asked questions