@intlayer/docs 8.9.7 → 8.10.0-canary.0

package/docs/en/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-03-24
+updatedAt: 2026-05-19
 title: Markdown
 description: Learn how to declare and use Markdown content in your multilingual website with Intlayer. Follow the steps in this online documentation to integrate Markdown seamlessly into your project.
 keywords:
@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.10.0
+    date: 2026-05-19
+    changes: "Add `.content.md` files support"
   - version: 8.5.0
     date: 2026-03-24
     changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
@@ -43,6 +46,39 @@ Intlayer supports rich text content defined using Markdown syntax. This allows y
 You can declare Markdown content using the `md` function or simply as a string (if it contains Markdown syntax).
 
 <Tabs>
+  <Tab label=".content.md" value=".content.md">
+    Since version `8.10.0`, you can declare Markdown content directly in `.content.md` files. Intlayer will
+    automatically detect and parse the Markdown content.
+
+    ```md fileName="markdown-file.en.content.md"
+    ---
+    key: my-markdown-content
+    description: My content
+    locale: en
+    ---
+
+    # My content
+
+    Here an example of markdown content
+    ```
+
+    The `locale` front-matter field is the field that define the locale of the content. It is optional. If not provided, Intlayer will use the default locale, which is also used as fallback locale if no translation is available for a specific locale.
+
+    Example of file structure:
+
+    ```text
+    content/
+    ├── en/
+    │   └── markdown-file.en.content.md
+    ├── fr/
+    │   └── markdown-file.fr.content.md
+    └── es/
+        └── markdown-file.es.content.md
+    ```
+
+    You can add in front-matter any properties defined in the [Dictionary definition](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
+
+  </Tab>
   <Tab label="Manual Wrapping" value="manual-wrapping">
     Use the `md` function to explicitly declare Markdown content. This is useful if you want to ensure a string is treated as Markdown even if it doesn't contain obvious syntax.
 
@@ -74,6 +110,7 @@ You can declare Markdown content using the `md` function or simply as a string (
     ```
 
   </Tab>
+
   <Tab label="External Files" value="external-files">
     Import `.md` files directly using the `file` function.
 

package/docs/en/interest_of_intlayer.md

@@ -233,5 +233,3 @@ GitHub stars are a strong indicator of a project's popularity, community trust,
 `intlayer` can also help to manage your `react-intl`, `react-i18next`, `next-intl`, `next-i18next`, and `vue-i18n` namespaces.
 
 Using `intlayer`, you can declare your content in the format of your favorite i18n library, and intlayer will generate your namespaces in the location of your choice (example: `/messages/{{locale}}/{{namespace}}.json`).
-
-Refer to [`dictionaryOutput` and `i18nextResourcesDir` options](https://intlayer.org/doc/concept/configuration#content-configuration) for more details.

package/docs/en/intlayer_with_analog.md

@@ -44,7 +44,7 @@ history:
 <iframe
   src="https://intlayer-analog-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-analog-template"
+  title="Demo - intlayer-analog-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_angular.md

@@ -68,7 +68,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-angular-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-angular-template"
+  title="Demo - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro.md

@@ -48,7 +48,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro_lit.md

@@ -47,7 +47,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -259,7 +259,7 @@ const { greeting } = getIntlayer("lit-demo", locale);
     />
   </head>
   <body>
-    <!-- The Lit custom element — receives the server-detected locale as a property -->
+    <!-- The Lit custom element - receives the server-detected locale as a property -->
     <lit-demo locale={locale}></lit-demo>
   </body>
 </html>
@@ -361,7 +361,7 @@ customElements.define("lit-demo", LitDemo);
 
 > The `locale` property is passed from the Astro page (server-detected) and used in `connectedCallback` to initialise `installIntlayer`, making it the initial locale for all `ReactiveController` hooks in the element.
 
-> `useIntlayer` registers itself as a `ReactiveController`. The element re-renders automatically when the locale changes — no extra setup required.
+> `useIntlayer` registers itself as a `ReactiveController`. The element re-renders automatically when the locale changes - no extra setup required.
 
 ### Step 7: Add a Locale Switcher
 
@@ -404,7 +404,7 @@ override render() {
 ```
 
 > **Note on Lit Reactivity:**
-> `useLocale` returns a `ReactiveController`. When `setLocale` is called, the controller schedules a re-render automatically — so the active button state updates without manual DOM manipulation.
+> `useLocale` returns a `ReactiveController`. When `setLocale` is called, the controller schedules a re-render automatically - so the active button state updates without manual DOM manipulation.
 
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.

package/docs/en/intlayer_with_astro_preact.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -110,7 +110,7 @@ bun x intlayer init
   Includes the Astro integration plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
 
 - **preact**
-  The core Preact package — a fast, lightweight alternative to React.
+  The core Preact package - a fast, lightweight alternative to React.
 
 - **preact-intlayer**
   The package that integrates Intlayer with Preact applications. It provides `IntlayerProvider`, `useIntlayer`, and `useLocale` hooks for Preact internationalization.
@@ -362,7 +362,7 @@ export const LocaleSwitcher: FunctionalComponent = () => {
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.
 
-> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` — use it inside your island component (as shown in Step 6).
+> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` - use it inside your island component (as shown in Step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en/intlayer_with_astro_react.md

@@ -49,7 +49,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -359,7 +359,7 @@ export function LocaleSwitcher() {
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.
 
-> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` — use it inside your island component (as shown in Step 6).
+> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` - use it inside your island component (as shown in Step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en/intlayer_with_astro_solid.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -354,12 +354,12 @@ export function LocaleSwitcher() {
 ```
 
 > **Note on Solid Reactivity:**
-> In Solid, `locale` is a reactive signal accessor — always call it as `locale()` when reading its current value.
+> In Solid, `locale` is a reactive signal accessor - always call it as `locale()` when reading its current value.
 
 > **Note on Persistence:**
 > Using `onLocaleChange` to redirect via `window.location.href` ensures that the new locale URL is visited, allowing Intlayer middleware to set the locale cookie and remember the user's preference on future visits.
 
-> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` — use it inside your island component (as shown in Step 6).
+> The `LocaleSwitcher` must be rendered inside `IntlayerProvider` - use it inside your island component (as shown in Step 6).
 
 ### Step 8: Sitemap and Robots.txt
 

package/docs/en/intlayer_with_astro_svelte.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro_vanilla.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_astro_vue.md

@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_nextjs_14.md

@@ -82,7 +82,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-next-14-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-next-14-template"
+  title="Demo - intlayer-next-14-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_nextjs_15.md

@@ -97,7 +97,7 @@ With Intlayer, you can:
 <iframe
   src="https://next-15-intlayer-template-xt83.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-next-15-template"
+  title="Demo - intlayer-next-15-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_nextjs_page_router.md

@@ -41,7 +41,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-next-14-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -52,7 +52,7 @@ history:
 <iframe
   src="https://intlayer-next-14-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-next-14-template"
+  title="Demo - intlayer-next-14-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_nuxt.md

@@ -78,7 +78,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-nuxt-4-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-nuxt-4-template"
+  title="Demo - intlayer-nuxt-4-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_react_native+expo.md

@@ -50,7 +50,7 @@ history:
 <iframe
   src="https://intlayer-react-native.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-react-native-template"
+  title="Demo - intlayer-react-native-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_react_router_v7.md

@@ -128,7 +128,7 @@ bun x intlayer init
 <iframe
   src="https://intlayer-react-router-v7.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-react-router-v7-template"
+  title="Demo - intlayer-react-router-v7-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_react_router_v7_fs_routes.md

@@ -85,7 +85,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-react-router-v7-fs-routes.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-react-router-v7-fs-routes-template"
+  title="Demo - intlayer-react-router-v7-fs-routes-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_storybook.md

@@ -2,7 +2,7 @@
 createdAt: 2026-03-20
 updatedAt: 2026-05-06
 title: How to set up Intlayer with Storybook
-description: Learn how to make your design system multilingual using Intlayer with Storybook — compile content declarations, add a locale switcher, and preview your components in any language.
+description: Learn how to make your design system multilingual using Intlayer with Storybook - compile content declarations, add a locale switcher, and preview your components in any language.
 keywords:
   - Internationalization
   - Documentation
@@ -33,7 +33,7 @@ history:
 
 ## What is Intlayer?
 
-**Intlayer** is an innovative, open-source internationalization (i18n) library designed to simplify multilingual support in modern web applications. It works at the **component level** — each component owns its content declarations — keeping translations co-located with the code that uses them.
+**Intlayer** is an innovative, open-source internationalization (i18n) library designed to simplify multilingual support in modern web applications. It works at the **component level** - each component owns its content declarations - keeping translations co-located with the code that uses them.
 
 With Intlayer you can:
 
@@ -83,9 +83,9 @@ bun add vite-intlayer --dev
 
 | Package          | Role                                                         |
 | ---------------- | ------------------------------------------------------------ |
-| `intlayer`       | Core — config, content compilation, CLI                      |
-| `react-intlayer` | React bindings — `IntlayerProvider`, `useIntlayer` hook      |
-| `vite-intlayer`  | Vite plugin — watches and compiles content declaration files |
+| `intlayer`       | Core - config, content compilation, CLI                      |
+| `react-intlayer` | React bindings - `IntlayerProvider`, `useIntlayer` hook      |
+| `vite-intlayer`  | Vite plugin - watches and compiles content declaration files |
 
 ---
 
@@ -291,7 +291,7 @@ export default config;
 
 ### Step 4: Add the `IntlayerProvider` Decorator and a Locale Toolbar
 
-Same as the Vite setup — add the decorator and global locale type in `.storybook/preview.tsx`:
+Same as the Vite setup - add the decorator and global locale type in `.storybook/preview.tsx`:
 
 ```tsx fileName=".storybook/preview.tsx" codeFormat="typescript"
 import type { Preview, StoryContext } from "@storybook/react";
@@ -411,7 +411,7 @@ const meta: Meta<typeof CopyButton> = {
 export default meta;
 type Story = StoryObj<typeof CopyButton>;
 
-/** Default story — switch the locale in the toolbar to preview translations. */
+/** Default story - switch the locale in the toolbar to preview translations. */
 export const Default: Story = {
   args: {
     content: "npm install intlayer react-intlayer",

package/docs/en/intlayer_with_svelte_kit.md

@@ -47,7 +47,7 @@ history:
 <iframe
   src="https://intlayer-sveltekit-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-sveltekit-template"
+  title="Demo - intlayer-sveltekit-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_tanstack+solid.md

@@ -79,7 +79,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-tanstack-start-solid.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-tanstack-start-solid-template"
+  title="Demo - intlayer-tanstack-start-solid-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_tanstack.md

@@ -96,7 +96,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-tanstack-start-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-tanstack-start-template"
+  title="Demo - intlayer-tanstack-start-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_vanilla.md

@@ -34,7 +34,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vanilla-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -45,7 +45,7 @@ history:
 <iframe
   src="https://intlayer-vanilla-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vanilla-template"
+  title="Demo - intlayer-vanilla-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_vite+lit.md

@@ -45,7 +45,7 @@ history:
 <iframe
   src="https://intlayer-vite-lit-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vite-lit-template"
+  title="Demo - intlayer-vite-lit-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -265,7 +265,7 @@ export default appContent;
 
 ### Step 6: Utilize Intlayer in Your LitElement
 
-Use `useIntlayer` inside a `LitElement`. It returns a `ReactiveController` proxy that automatically triggers re-renders whenever the active locale changes — no extra setup required.
+Use `useIntlayer` inside a `LitElement`. It returns a `ReactiveController` proxy that automatically triggers re-renders whenever the active locale changes - no extra setup required.
 
 ```typescript fileName="src/my-element.ts" codeFormat="typescript"
 import { LitElement, html } from "lit";

package/docs/en/intlayer_with_vite+preact.md

@@ -55,7 +55,7 @@ history:
 <iframe
   src="https://intlayer-vite-preact-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vite-preact-template"
+  title="Demo - intlayer-vite-preact-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_vite+react.md

@@ -73,7 +73,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-vite-react-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vite-react-template"
+  title="Demo - intlayer-vite-react-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_vite+react_compiler.md

@@ -55,7 +55,7 @@ history:
 <iframe
   src="https://intlayer-vite-react-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vite-react-template"
+  title="Demo - intlayer-vite-react-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_vite+svelte.md

@@ -39,7 +39,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vite-svelte-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -50,7 +50,7 @@ history:
 <iframe
   src="https://intlayer-vite-svelte-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vite-svelte-template"
+  title="Demo - intlayer-vite-svelte-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/intlayer_with_vite+vanilla.md

@@ -35,7 +35,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vite-vanilla-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-vite-vanilla.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vite-vanilla-template"
+  title="Demo - intlayer-vite-vanilla-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -255,7 +255,7 @@ export default appContent;
 
 ### Step 6: Use Intlayer in Your JavaScript
 
-`vanilla-intlayer` mirrors the `react-intlayer` surface API: `useIntlayer(key, locale?)` returns the translated content directly. Chain `.onChange()` on the result to subscribe to locale changes — the explicit equivalent of a React re-render.
+`vanilla-intlayer` mirrors the `react-intlayer` surface API: `useIntlayer(key, locale?)` returns the translated content directly. Chain `.onChange()` on the result to subscribe to locale changes - the explicit equivalent of a React re-render.
 
 ```typescript fileName="src/main.ts" codeFormat="typescript"
 import { installIntlayer, useIntlayer } from "vanilla-intlayer";
@@ -456,7 +456,7 @@ const unsubscribe = useDictionaryDynamic(
 });
 ```
 
-> Each locale's bundle is fetched only when that locale becomes active and the result is cached — subsequent switches to the same locale are instant.
+> Each locale's bundle is fetched only when that locale becomes active and the result is cached - subsequent switches to the same locale are instant.
 
 ### (Optional) Step 13: Extract the content of your components
 

package/docs/en/intlayer_with_vite+vue.md

@@ -75,7 +75,7 @@ With Intlayer, you can:
 <iframe
   src="https://intlayer-vite-vue-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo — intlayer-vite-vue-template"
+  title="Demo - intlayer-vite-vue-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/en/readme.md

@@ -66,6 +66,7 @@ With **per-locale content files**, **TypeScript autocompletion**, **tree-shakabl
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700">                                 | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)                                                                                                                                                            |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700">                    | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                                                |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700">                    | **Interoperability**<br><br>Allow interoperability with react-i18next, next-i18next, next-intl, react-intl, vue-i18n. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer and vue-i18n](https://intlayer.org/blog/intlayer-with-vue-i18n) |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/benchmark.png?raw=true" alt="Feature" width="700">                           | **Performances & Benchmark**<br><br>Uses advanced tree-shaking and dynamic loading to boost performances and keep the solution as light as possible. <br><br> - [Performances & Benchmark](https://intlayer.org/doc/benchmark)                                                                                                                                                                                                                                              |
 
 ---
 
@@ -261,6 +262,18 @@ Explore our comprehensive documentation to get started with Intlayer and learn h
 </ul>
 </details>
 
+## Multilingual content management system
+
+More than an i18n library, Intlayer is a complete **multilingual content management system**. A full CMS is available for free at [app.intlayer.org](https://app.intlayer.org).
+
+Intlayer connects **developers**, **copywriters**, and **AI agents** in one workflow for creating and maintaining multilingual websites effortlessly.Intlayer replaces the following stack in a single solution:
+
+- i18n solutions (e.g. `i18next`, `next-intl`, `vue-i18n`)
+- TMSs (Translation Management Systems) (e.g. Crowdin, Phrase, Lokalise)
+- Headless CMSs (e.g. Contentful, Strapi, Sanity)
+
+![CMS Preview](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png?raw=true)
+
 ## 🌐 Readme in other languages
 
 <p align="center">

package/docs/en-GB/agent_skills.md

@@ -76,7 +76,7 @@ npx skills add aymericzip/intlayer-skills
 
 **intlayer-content**
 
-- Teaches the agent how to utilize advanced content nodes—such as pluralization, conditions, and markdown—to construct rich, dynamic, and localized dictionaries.
+- Teaches the agent how to utilize advanced content nodes-such as pluralization, conditions, and markdown-to construct rich, dynamic, and localized dictionaries.
 
 **intlayer-next-js**
 
@@ -108,7 +108,7 @@ npx skills add aymericzip/intlayer-skills
 
 **intlayer-vue**
 
-- Equips the agent with Vue-specific patterns—including Composables and Nuxt support—to build modern, localized web applications.
+- Equips the agent with Vue-specific patterns-including Composables and Nuxt support-to build modern, localized web applications.
 
 **intlayer-compiler**