Flerspråkig app: svenska och engelska i Lovable utan att ändra posterna

Guiden gäller aktivt språkbyte och vad appen gör när en översättning saknas. Ska appen bara finnas på svenska räcker artikeln om svenska i appen.

Redaktionen har inte haft tillgång till något Lovable-konto för guiden, så varken beställningen eller testmatrisen är körd i Lovable. Allt nedan är beteende du ber om, inte något Lovable lovar. Rubriker och sammanfattningar i Lovables dokumentationsindex innehöll den 7 november 2026 inte orden translate, locale, i18n eller multi-language, så det finns ingen produktbeskrivning av just den här funktionen att luta sig mot. Det betyder inte att det är omöjligt, bara att provet avgör.

Exemplet är en påhittad app, Lånelistan, där en bostadsrättsförening lånar ut verktyg. Varje lån har titel, status, deposition och återlämningstid. Byt ut orden mot det som finns i din app.

Steg 1: dela upp appens text i tre sorter

Mellanraden är lätt att missa. Sparar databasen själva ordet Utlånad, och någon sedan lägger in ett lån på engelska, kan samma status finnas som två olika ord. Ett filter på Utlånad kan då missa lånet som sparades som On loan. Det är vår slutsats av hur en textjämförelse fungerar, inte ett fel vi har sett i Lovable. Därför beställer du fasta koder.

Har appen redan poster med status som ord krävs en ändring av databasen för att byta till koder. Den går inte att göra som en ren textändring, så läs planen extra noga och prova på påhittade poster först.

Steg 2: bestäm språk, format, tidszon och valuta

Att spara valet i webbläsaren görs ofta med localStorage. MDN anger att data där sparas mellan webbläsarsessioner, men att data från ett privat fönster rensas när den sista privata fliken stängs. Det påverkar prov 9 nedan.

Tidszon och valuta måste bestämmas för sig. Anges ingen tidszon i JavaScripts Intl.DateTimeFormat används enligt MDN körmiljöns egen. Två läsare med datorer i olika tidszoner kan alltså se olika klockslag, oavsett språk, vilket är vår slutsats. För valutaformat i Intl.NumberFormat skriver MDN att currency inte har något standardvärde och måste anges.

Så här ser skillnaden ut i ett litet prov vi körde själva, med Node 24.13.0 (ICU 77.1) på Windows 11 den 7 november 2026. Du behöver inte skriva koden. Den visar vad du ska förvänta dig av samma tidpunkt, samma belopp och samma tre titlar.

const nar = new Date("2026-11-25T16:30:00Z");
for (const sprak of ["sv-SE", "en-GB", "en-US"]) {
  const datum = new Intl.DateTimeFormat(sprak, {
    dateStyle: "long", timeStyle: "short", timeZone: "Europe/Stockholm",
  }).format(nar);
  const pris = new Intl.NumberFormat(sprak, {
    style: "currency", currency: "SEK",
  }).format(1250);
  const titlar = ["Zebra", "Äppelkorg", "Ankare"].sort(new Intl.Collator(sprak).compare);
  console.log(sprak, "|", datum, "|", pris, "|", titlar.join(", "));
}

sv-SE | 25 november 2026 kl. 17:30 | 1 250,00 kr | Ankare, Zebra, Äppelkorg
en-GB | 25 November 2026 at 17:30 | SEK 1,250.00 | Ankare, Äppelkorg, Zebra
en-US | November 25, 2026 at 5:30 PM | SEK 1,250.00 | Ankare, Äppelkorg, Zebra

Beloppet räknades inte om och tidpunkten flyttades inte, eftersom båda var fast angivna. Bara skrivsättet ändrades, och en-US gav 5:30 PM där en-GB gav 17:30. Sorteringen ändrades däremot: Äppelkorg hamnar sist på svenska men före Zebra på engelska. Listan skulle alltså kunna ändra ordning vid ett språkbyte, så i exemplet beställer du svensk sortering på båda språken. Provet visar Node, inte din app, och en annan webbläsare kan skriva något annorlunda.

Steg 3: beställ språkvalet

Skicka beställningen som en egen prompt, med hakparenteserna utbytta. Testa sedan i nästa prompt. Lovable avråder från att be om en stor ändring och ett test i samma prompt, eftersom arbete från det steget kan gå förlorat om testet fastnar och du stoppar det.

Lägg till två valbara språk i appen: svenska och engelska.
Svenska gäller vid första besöket. Börja med att visa en plan med
vilka filer och databasändringar du tänker göra. Vänta på mitt ok.

Språkval
- Visa en väljare med orden Svenska och English, inte bara en ikon.
- Spara valet så att det gäller efter omladdning: i profilen om
  användaren är inloggad, annars i webbläsaren.
- Sätt lang="sv" eller lang="en" på html-taggen när språket byts.

Det som ska finnas på båda språken
- Appens egna texter: rubriker, knappar, etiketter, felmeddelanden,
  tomma lägen, väntlägen och bekräftelserutor.
- Samla texterna på ett ställe och visa alla engelska texter i en
  lista så att jag kan granska dem.

Det som inte får ändras
- Översätt eller kopiera inga sparade poster. Lägg inte till
  språkvarianter av [titel], [anteckning] eller andra fält med
  användarens text.
- Ett språkbyte får inte skapa, ändra eller radera en post.
- Spara [status] som fasta koder, till exempel on_loan och available.
  Visa etiketten på valt språk.
- Text i ett halvfärdigt formulär ska stå kvar efter språkbytet.
  Ett synligt felmeddelande ska byta språk.

Saknad översättning
- Saknas en engelsk text: visa den svenska och skriv en varning i
  konsolen. Visa aldrig ett tomt fält eller ett internt textnamn.

Format
- Datum och belopp följer sv-SE respektive en-GB.
- Tidszonen är alltid [Europe/Stockholm] och valutan alltid [SEK].
  Språket får inte ändra dem, och belopp får inte räknas om.
- Sortera [titel] i svensk ordning på båda språken.

Ändra ingen annan funktion.

Läs planen innan du svarar ok. Står det nya kolumner som title_en, en kopia av tabellen eller en automatisk översättning av poster, stämmer planen inte med beställningen. Säg nej och peka på raden. En kolumn för språkval i profilen är däremot väntad, och koder för status kan kräva den ändring du läste om i steg 1.

Raden om html-taggen följer W3C, som säger att attributet alltid ska finnas där och ange sidans standardspråk. Koderna sv och en finns i IANA:s register, som W3C hänvisar till. Att värdet ska följa med när språket byts är vår slutsats, eftersom sidans språk då har ändrats. W3C anger också att innehåll på ett annat språk ska märkas på ett omgivande element. Appen vet inte vilket språk en användare skrev en titel på, så vi har inte tagit med det i beställningen. Det är en känd lucka i guidens upplägg.

Räkna inte engelskan som färdig bara för att den finns. Guiden lovar inte att en automatiskt skriven översättning stämmer, så läs listan eller låt någon som kan språket göra det. Artikeln om formulärvalidering hjälper dig att skriva felmeddelanden som går att agera på.

Steg 4: lägg in testposter och spara en före-bild

Lägg in tre påhittade lån. Var och en prövar något särskilt:

• P1 Slagborrmaskin. Status on_loan, deposition 1 250 kr, åter 25 november 2026 kl. 17:30 svensk tid. Prövar svensk titel, datum och belopp.
• P2 Ladder 3 m. Status available, deposition 400 kr. Titeln är engelsk med flit och ska inte heller översättas till svenska.
• P3 Ängsklippare med extra långt förlängningsskaft och tillhörande transportvagn. Status available, ingen deposition. Prövar lång text och sortering.

Fråga sedan efter en före-bild och spara svaret. Det är den du jämför med i prov 12. Svaret du får är ett exempel på en läsfråga, inte ett garanterat utfall.

Lista alla rader i tabellen [lån] med id, titel, status, deposition
och återlämningstid precis som de är sparade. Räkna raderna.
Ändra inget.

Steg 5: gå igenom testmatrisen

Texterna i matrisen gäller Lånelistan, och datumen och beloppen kommer från det lokala provet. Skriv in dina egna texter innan du börjar och anteckna vad som faktiskt visas. Beteendet är provet, inte exakt ordval.

Prov 12 är det viktigaste. Kör det också direkt efter prov 3, 4 och 10, eftersom en post där kan ha skapats av misstag. Har Provlåda dykt upp som rad i databasen sparar språkbytet formuläret, och det är ett fel även om allt annat ser rätt ut.

Läs avvikelserna som diagnos. Står knappen på rätt språk men felmeddelandet på det andra i prov 4, kommer texten troligen från en annan del av appen än de samlade texterna. Blir listan tom efter språkbytet i prov 7 tyder det på att filtret jämför med etiketten i stället för koden. Mer om vad ett tomt läge ska säga finns i artikeln om tomma lägen. Visa Lovable provet, det förväntade och det faktiska utfallet, och be om en rättning av just den raden. Be inte om att poster ska raderas och läggas in igen, för då försvinner den jämförelse provet bygger på.

Steg 6: låt Lovable upprepa delar av provet

Lovables browser testing kör enligt dokumentationen appen i en riktig webbläsare i en fjärrstyrd miljö. Agenten kan klicka, fylla i formulär, ta skärmbilder, läsa konsolloggar och prova mobil-, surfplatte- och datorbredd. Det täcker en del av matrisen men ersätter inte prov 12.

Use browser testing to verify the language switch on the page [Lån],
at mobile and desktop width:
switch between Svenska and English, reload the page and open the
form for a new loan without submitting it.
Report any text shown in the wrong language and any cut-off text.
Do not save, change or delete any record.

Prompten är på engelska eftersom Lovable anger sina startfraser så, men det är inget krav vi har sett i källan. Fyra saker i dokumentationen påverkar provet:

• Testet körs mot förhandsvisningen. Testmiljön används bara i appar som har funktionen för test- och livemiljö, så kör med påhittade poster och skriv ut vad som inte får klickas.
• Inloggat test kräver Lovables inbyggda backend. Med ett eget Supabase-projekt eller en annan inloggning går det bara att testa sidor utan inloggning.
• Ikonknappar utan text kan vara svårare att använda. Det är ytterligare ett skäl att väljaren visar orden Svenska och English.
• Verktyget är inte tillförlitligt för subtila visuella detaljer. Titta därför själv på långa texter.

När appen klarar provet kan du lägga regeln i Lovables projektinstruktioner, som enligt dokumentationen alltid finns med i sammanhanget och tas hänsyn till vid ändringar: ”Nya texter ska finnas på svenska och engelska. Sparade poster översätts aldrig.” Det är ett råd från oss, inte en garanti, så gör om prov 1, 4 och 12 efter nya funktioner.

Det guiden inte täcker

Mejl, PDF:er och sidor från en betaltjänst eller inloggningstjänst har egna texter och behöver egna prov. Språkbytet här sker inne i appen, och guiden tar inte upp separata adresser per språk för sökmotorer. Hjälpmedel som skärmläsare är inte heller provade. Mer om det finns i artikeln om tillgänglighet utan kod.

Källor och avgränsning

• W3C: Declaring language in HTML – lang på html-taggen, språkmärkning av delar och hänvisningen till IANA i steg 3.
• IANA: Language Subtag Registry – koderna sv och en i steg 3.
• MDN: Intl – språkkänslig formatering och jämförelse av text i provet i steg 2.
• MDN: Intl.DateTimeFormat() – standardvärdet för timeZone i steg 2.
• MDN: Intl.NumberFormat() – att currency saknar standardvärde i steg 2.
• MDN: localStorage – sparande mellan sessioner och privata fönster i steg 2.
• Lovable: Test your app in a browser – stor ändring och test var för sig i steg 3, samt förmågor och begränsningar i steg 6.
• Lovable: Instructions – projektinstruktionerna i steg 6.
• Lovable: dokumentationsindex – genomsökningen efter en sida om flerspråkighet i inledningen.

Källorna kontrollerades 7 november 2026. Inget Lovable-konto eller app har provats, så beställningen, frågorna och testmatrisens utfall är inte provkörda i Lovable. Lånelistan och dess poster är påhittade. Formatprovet kördes i Node och den publicerade koden är exakt den som kördes.