DOCSEARCHbyAlgolia
Submit Docs

Intlayer Documentation

repository·main·Indexed 21 days ago

https://github.com/aymericzip/intlayer

An AI-powered i18n solution and multilingual content management system that provides a layer of abstraction between business logic and the data access layer. Intlayer supports per-component internationalization across frameworks like Next.js, React, Vue, and Svelte, offering a type-safe environment with a visual editor, CMS, and an Intlayer Compiler for automatic content extraction. It includes a dedicated Language Server (LSP) for Go-to-Definition functionality and a Chrome extension for i18n and SEO auditing.

Tokens
424.6K
Snippets
1.4K
Records
1.7K
Agent score
62%

What's inside Intlayer

  1. Overview of Intlayer

    main

    Intlayer is a modern, framework-agnostic internationalization (i18n) solution designed for web and mobile applications. It focuses on a per-component i18n approach, allowing developers to manage translations closely with their components.

    Key features include:

    • AI-powered translation: Leverages AI to assist in the translation process.
    • Visual Editor & CMS: Provides a free CMS and visual editor for managing content.
    • Developer Experience: Offers TypeScript autocompletion and tree-shakable dictionaries.
    • Content Management: Uses per-locale content files and supports CI/CD integration to make internationalization faster and cleaner.

  2. Overview of @intlayer/chrome-extension

    main

    The @intlayer/chrome-extension is a Manifest V3 Chrome extension designed to inspect the internationalization (i18n) implementation of any website you visit. It functions similarly to Wappalyzer but focuses specifically on i18n and SEO.

    Key features include:

    • Technology Detection: Identifies frameworks (e.g., Next.js, Nuxt, Astro, React) and i18n libraries (e.g., Intlayer, i18next, Vue I18n, Weglot) along with their versions and detection evidence.
    • Locale Discovery: Extracts locales from lang, hreflang, and og:locale tags, URL prefixes, and cookies/storage.
    • SEO i18n Audit: Analyzes html lang/dir, canonical tags, hreflang, x-default, and og:locale tags, as well as localized internal-link ratios.
    • Full Audit: Provides a live stream of an i18n/SEO audit by connecting to the Intlayer backend (GET /api/scan), displaying live scores and individual checks.

  3. Overview of Intlayer for React Native

    main

    Intlayer is an open-source internationalization library designed for modern JavaScript applications, including React Native. It uses a declarative approach where you can define translations directly alongside your components or in centralized files.

    Key Benefits for React Native:

    • TypeScript Support: Automatically generates type definitions for translation keys, providing autocompletion and error checking.
    • Lightweight: Designed to work efficiently in mobile environments without unnecessary overhead.
    • Asynchronous Loading: Supports dynamic loading of translation dictionaries, which is ideal for large apps or incremental language rollouts.
    • Flexible Declaration: Allows for component-level or single-file translation storage.

  4. What is Intlayer?

    main

    Intlayer is a modern, framework-agnostic i18n (internationalization) solution designed for web and mobile applications. It focuses on a per-component approach to internationalization, allowing developers to manage content closely with their UI components.

    Key Features:

    • AI-powered translation: Leverages AI to assist in the translation process.
    • Visual Editor & CMS: Includes a free CMS and visual editor for managing multilingual content.
    • Per-locale content files: Content is organized into specific files per locale, making it easier to manage and scale.
    • TypeScript Autocompletion: Provides full type safety and autocompletion for your translation keys.
    • Tree-shakable dictionaries: Ensures that only the necessary translations are bundled, optimizing application performance.
    • CI/CD Integration: Designed to work seamlessly within modern development workflows.

  5. Overview of Intlayer for React i18n

    main

    Intlayer is an open-source internationalization (i18n) library designed for modern React applications. It uses a declarative approach where you can define translation dictionaries directly at the component level. This centralizes translations and makes them easier to maintain as the application scales.

    Key Capabilities:

    • Declarative Translation: Define translations in a single file associated with your components.
    • Type Safety: Automatically generates TypeScript definitions for translation keys, providing autocompletion and error detection.
    • Performance: Supports asynchronous loading of translation dictionaries to minimize initial bundle size.
    • SEO & SSR: Built for Server-Side Rendering (SSR) and React Server Components, including support for localized metadata, dynamic locale-based routes, sitemaps, and robots.txt.
    • Framework Compatibility: Works with Vite, Next.js, and Create React App.

  6. What is Intlayer?

    main
    Intlayer is an internationalization (i18n) library for JavaScript developers that allows you to declare multilingual content directly alongside your code. It converts these declarations into structured dictionaries, making it easy to integrate into your application. By leveraging TypeScript, Intlayer provides strong typing for your content, improving development efficiency and accuracy.

  7. What is Intlayer? (Multilingual CMS Overview)

    main

    Intlayer is a complete multilingual content management system designed to connect developers, copywriters, and AI agents. It is intended to replace several separate tools in a single solution:

    • i18n solutions (e.g., i18next, next-intl, vue-i18n)
    • Translation Management Systems (TMSs) (e.g., Crowdin, Phrase, Lokalise)
    • Feature flags
    • Headless CMSs (e.g., Contentful, Strapi, Sanity)

    A full CMS is available at app.intlayer.org.

  8. Overview of Intlayer CLI Commands

    main

    The Intlayer CLI provides a comprehensive suite of tools for managing multilingual content, dictionaries, components, and documentation. Commands are categorized into several functional areas:

    Authentication

    • Login: Authenticate with the Intlayer CMS to obtain access credentials.

    Core Commands

    • Build Dictionaries: Build dictionaries from your content declaration files.
    • Watch Dictionaries: Monitor changes and automatically rebuild dictionaries.
    • Create Standalone Bundle: Generate a standalone JavaScript bundle containing Intlayer and specific packages.
    • Check CLI Version: Verify the installed Intlayer CLI version.
    • List Projects: List all Intlayer projects in a directory or Git repository.

    Dictionary Management

    • Push Dictionaries: Send dictionaries to the Intlayer Editor and CMS.
    • Pull Dictionaries: Fetch dictionaries from the Intlayer Editor and CMS.
    • Fill Dictionaries: Use AI to fill, audit, and translate dictionaries.
    • Test Missing Translations: Identify and test for missing translations.
    • List Content Declaration Files: List all content declaration files in your project.

    Component Management

    • Extract Strings: Extract strings from components into a .content file located near the component.

    Configuration

    • Initialize Intlayer: Set up Intlayer in your project with automatic configuration.
    • Manage Configuration: Retrieve your Intlayer configuration and send it to the CMS.

    Document Management

    • Translate Document: Automatically translate document files using AI.
    • Review Document: Review document files for quality and consistency.

    Editor and Live Sync

    • Editor Commands: Use Intlayer Editor-specific commands.
    • Live Sync Commands: Use live sync to apply content changes from the CMS at runtime.

    CI/CD and Automation

    • CI Command: Execute Intlayer commands with automatically injected credentials for CI/CD pipelines.

    Auditing and Diagnostics

    • Scan Website: Measure page size and audit i18n/SEO status for any public URL.

    Developer Tools

    • CLI SDK: Use the Intlayer CLI SDK within your own code.
    • Debug Intlayer Command: Debug and resolve issues with the Intlayer CLI.

  9. Overview of Intlayer for Svelte

    main

    Intlayer is an open-source internationalization (i18n) library designed for modern Svelte applications. It uses a declarative approach where you can define translation dictionaries directly at the component level. This helps centralize translations and improves maintainability compared to scattered strings in single-file components.

    Key Benefits for Svelte Developers:

    • TypeScript Support: Automatically generates type definitions for translation keys, enabling autocompletion and error detection.
    • SEO Optimized: Built to handle localized metadata, dynamic locale-based routes, sitemaps, and robots.txt entries.
    • SSR & Server Components: Ensures efficient rendering of localized content on both the client and the server.
    • Performance: Supports asynchronous loading of translation dictionaries to reduce initial bundle size.

  10. What is Intlayer: A Multilingual Content Management System

    main

    Intlayer is more than just an i18n library; it is a complete multilingual content management system (CMS). It is designed to connect developers, copywriters, and AI agents into a single workflow for creating and maintaining multilingual websites.

    Intlayer acts as a unified solution that replaces several separate tools:

    • i18n solutions (e.g., i18next, next-intl, vue-i18n)
    • Translation Management Systems (TMSs) (e.g., Crowdin, Phrase, Lokalise)
    • Feature flags
    • Headless CMSs (e.g., Contentful, Strapi, Sanity)

    A free CMS interface is available at app.intlayer.org.

  11. What is Intlayer?

    main

    Intlayer is a complete multilingual content management system that goes beyond a standard i18n library. It is designed to connect developers, copywriters, and AI agents into a single workflow.

    It is intended to replace the following stack with a single solution:

    • i18n solutions (e.g., i18next, next-intl, vue-i18n)
    • Translation Management Systems (TMSs) (e.g., Crowdin, Phrase, Lokalise)
    • Feature flags
    • Headless CMSs (e.g., Contentful, Strapi, Sanity)

    A free full CMS is available at app.intlayer.org.

  12. Overview of Intlayer Formatters

    main

    Intlayer provides locale-aware formatting utilities built on top of native Intl APIs. These formatters automatically use the current locale from your application context, which removes the need to manually pass locale parameters to every function call.

    Depending on your framework, you must import from the specific package to ensure the locale context is correctly bound:

    FrameworkImport Path
    React (client)react-intlayer/format
    React (server)react-intlayer/server/format
    Next.js (client)next-intlayer/client/format
    Next.js (server)next-intlayer/server/format
    Vuevue-intlayer/format
    Preactpreact-intlayer/format
    Vanilla JS / Node.jsintlayer (requires manual locale passing)