IntlPull
SolidJS
15K weekly downloads

SolidJS Localization Guide

Fine-grained reactive i18n for SolidJS. Primitives-based approach. Zero virtual DOM overhead. Perfect for performance-critical apps.

Prerequisites

  • SolidJS 1.x application
  • Node.js 18+
  • npm or pnpm package manager

Common Challenges

Problems developers face when localizing SolidJS apps—and how IntlPull helps.

Smaller Ecosystem

Fewer resources and plugins compared to React i18n libraries.

ICU Format Limited

Basic ICU support. Complex formatting may need additional setup.

Documentation

Growing documentation. Some patterns require community examples.

@solid-primitives/i18n Features

Why @solid-primitives/i18n is a great choice for SolidJS localization.

Fine-Grained Reactivity

Only translated text re-renders. No component re-renders on language change.

vs component-level updates

Primitives Architecture

Composable primitives. Build custom i18n solutions. Extend easily.

vs monolithic libraries

TypeScript First

Full TypeScript support. Type-safe translation keys. Autocomplete in IDE.

vs runtime key errors

Lazy Loading

Load translations on demand. Dynamic imports. Code splitting friendly.

vs loading all upfront

SSR Compatible

Works with SolidStart SSR. Proper hydration. SEO friendly.

vs client-only solutions

Tiny Bundle

Under 2KB gzipped. No heavy dependencies. Solid-native approach.

vs bloated libraries

Quick Setup

Get @solid-primitives/i18n running in your SolidJS project.

1

Install Dependencies

Add solid-primitives i18n package.

npm install @solid-primitives/i18n
2

Create Translation Files

Set up locale dictionaries.

// src/i18n/en.ts
export const dict = {
  welcome: {
    title: 'Welcome',
    description: 'Build something amazing with SolidJS',
  },
  nav: {
    home: 'Home',
    about: 'About',
    contact: 'Contact',
  },
};

// src/i18n/es.ts
export const dict = {
  welcome: {
    title: 'Bienvenido',
    description: 'Construye algo increible con SolidJS',
  },
  nav: {
    home: 'Inicio',
    about: 'Acerca',
    contact: 'Contacto',
  },
};
3

Create i18n Context

Set up the i18n provider.

// src/i18n/index.tsx
import { createI18nContext, I18nContext } from '@solid-primitives/i18n';
import { ParentComponent, createSignal } from 'solid-js';
import * as en from './en';
import * as es from './es';

const dictionaries = { en: en.dict, es: es.dict };

export const I18nProvider: ParentComponent = (props) => {
  const [locale, setLocale] = createSignal('en');
  const value = createI18nContext(dictionaries, locale);
  
  return (
    <I18nContext.Provider value={value}>
      {props.children}
    </I18nContext.Provider>
  );
};
4

Wrap App

Add provider to your app.

// src/index.tsx
import { render } from 'solid-js/web';
import { I18nProvider } from './i18n';
import App from './App';

render(
  () => (
    <I18nProvider>
      <App />
    </I18nProvider>
  ),
  document.getElementById('root')!
);
5

Use Translations

Access translations in components.

import { useI18n } from '@solid-primitives/i18n';

function Welcome() {
  const [t, { locale, setLocale }] = useI18n();
  
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.description')}</p>
      
      <select value={locale()} onChange={(e) => setLocale(e.target.value)}>
        <option value="en">English</option>
        <option value="es">Espanol</option>
      </select>
    </div>
  );
}

IntlPull Integration

Connect IntlPull to manage translations professionally.

1

Install IntlPull CLI

Add the CLI for translation management.

npm install -D @intlpull/cli
2

Configure intlpull.json

Set up the project configuration.

{
  "projectId": "your-project-id",
  "format": "typescript",
  "sourceLocale": "en",
  "localesDir": "./src/i18n",
  "filePattern": "{locale}.ts"
}
3

Pull Translations

Download translations from IntlPull.

npx intlpull pull --format typescript
4

Add to Build

Integrate with your build process.

// package.json
{
  "scripts": {
    "i18n:pull": "intlpull pull --format typescript",
    "build": "npm run i18n:pull && vite build"
  }
}

Frequently Asked Questions

Related Guides

React

React i18next Localization Guide

Complete guide to React localization with react-i18next. Setup, lazy loading, namespaces, SSR, and IntlPull integration for production i18n.

Svelte

Svelte Localization with svelte-i18n

Complete guide to Svelte localization with svelte-i18n. Store-based reactivity, lazy loading, and IntlPull integration for SvelteKit apps.

Ready to Localize Your SolidJS App?

Start with our free tier. No credit card required.

    SolidJS Localization Guide | IntlPull | IntlPull