Skip to content

SolidStart i18n · TypeScript

SolidStart i18n that stays native to Solid.

Palamedes pairs a Vite build integration with dedicated Solid authoring and runtime packages. Solid-native components and hook-free lookups share one catalog model across request-local SSR and hydration.

UI integration
@palamedes/solid

Solid macros, formatters, and locale primitives.

Verified against
SolidStart 2.0

Vite Environment API, Nitro v3, and Vite 8.

Rendering
SSR + client

Isomorphic routes with one locale per document.

Locale models
4 examples

Cookie, route, subdomain, and top-level domain.

npm package@palamedes/solidv1.17.32.4K downloads / month

01 — The framework problem

SolidStart i18n has to cross the server boundary without importing a React mental model.

A Solid application should not need provider patterns designed for another renderer. Locale state must still agree across the server response, hydration, and a later document navigation.

02 — The Palamedes model

Share catalog semantics, not renderer internals.

The native core and Vite adapter stay common across hosts. @palamedes/solid owns rich-message rendering while the active locale remains framework-neutral document bootstrap state.

Solid-native authoring

Use t, plural, and the Solid Trans macro beside JSX. Rich messages compile for Solid instead of passing through a React adapter.

Hook-free document locale

Translations read one active instance through a plain getter. Locale controls navigate the document so Solid state and external caches restart together.

One catalog pipeline

The same extraction, ICU diagnostics, PO or FCL storage, audits, and semantic merging apply before the renderer sees a message.

03 — In TypeScript

Configure the transform once, then author messages as Solid code.

vite.config.ts + routes/[locale].tsx

// vite.config.ts
import { nitro } from "nitro/vite"
import { defineConfig } from "vite"
import { solidStart } from "@solidjs/start/config"
import { palamedes } from "@palamedes/vite-plugin"

export default defineConfig({
  plugins: [
    palamedes({ framework: "solid" }),
    solidStart(),
    nitro(),
  ],
})

// routes/[locale].tsx
import { Trans } from "@palamedes/solid/macro"

export default function LocalePage() {
  return <h1><Trans>Welcome to Palamedes</Trans></h1>
}

The route example activates a request-local server instance for SSR, initializes the browser locale once, and uses normal links for locale navigation.

04 — Locale strategy

Choose the URL model that fits your SolidStart product.

SolidStart's file routes and request APIs decide where the locale lives. Each checked Palamedes example keeps the Solid authoring and runtime surface unchanged while swapping the detection and switching policy.

Cookie

One URL for all locales. Best for apps behind login where SEO is irrelevant and switching should be instant.

open demosource →

Route segment

/de/checkout-style paths. The SEO-friendly default for public content with indexable localized pages.

open demosource →

Subdomain

de.example.com. Clean separation per market, works well with regional CDNs and analytics splits.

open demosource →

Top-level domain

example.de vs example.com. Maximum market trust; Palamedes maps each domain to its locale.

◌ local / CIsource →

Compare the four locale strategies →

05 — Proof and boundaries

Solid behavior is verified, not inferred from the React adapter.

The SolidStart matrix uses @palamedes/solid directly. Browser checks exercise the rendered page, the locale switch, and localized server work for every URL strategy.

Renderer
Solid-native

No React provider or React translation component.

Initial response
SSR checked

The selected catalog renders before hydration.

Interaction
Navigation checked

A new document renders consistently in the selected locale.

Server behavior
Handler checked

Translated server output is exercised in CI.

06 — Questions

SolidStart i18n questions, answered

The short version of the decisions that usually block an implementation.

Is Palamedes for SolidStart a React wrapper?
No. @palamedes/solid provides Solid-specific macros, components, formatters, runtime wiring, and client locale helpers. Only the lower catalog and transformation model is shared.
Does SolidStart i18n work during server-side rendering?
Yes on the verified SolidStart 2 path. The example activates a server i18n instance before route rendering and initializes the matching client locale for hydration.
Can I use route-based locales such as /de/products?
Yes. The route example derives the locale from a dynamic SolidStart segment. Cookie, subdomain, and top-level-domain examples use the same messages and Solid runtime with different resolution policies.
Is SolidStart 2 verified?
Yes. The browser matrix pins SolidStart 2.0 and exercises the direct Vite plus Nitro v3 path across all four locale strategies.

07 — Keep exploring

See how the same model meets a different host.

Use Solid for the renderer and one coherent model for the translations.