@intlayer/docs 9.0.0-canary.15 → 9.0.0-canary.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/generated/docs.entry.cjs +40 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +40 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +2 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/cli/index.md +1 -1
- package/docs/ar/configuration.md +42 -1
- package/docs/ar/intlayer_CMS.md +5 -128
- package/docs/ar/live-sync.md +174 -0
- package/docs/ar/releases/v9.md +45 -1
- package/docs/bn/cli/index.md +1 -1
- package/docs/bn/configuration.md +45 -1
- package/docs/cs/cli/index.md +1 -1
- package/docs/cs/configuration.md +45 -1
- package/docs/de/cli/index.md +1 -1
- package/docs/de/configuration.md +42 -1
- package/docs/de/intlayer_CMS.md +5 -135
- package/docs/de/live-sync.md +174 -0
- package/docs/de/releases/v9.md +45 -1
- package/docs/en/analytics.md +222 -0
- package/docs/en/cli/index.md +1 -1
- package/docs/en/configuration.md +42 -1
- package/docs/en/intlayer_CMS.md +6 -140
- package/docs/en/live-sync.md +184 -0
- package/docs/en/releases/v9.md +53 -3
- package/docs/en-GB/cli/index.md +1 -1
- package/docs/en-GB/configuration.md +42 -1
- package/docs/en-GB/intlayer_CMS.md +5 -128
- package/docs/en-GB/live-sync.md +173 -0
- package/docs/en-GB/releases/v9.md +45 -1
- package/docs/es/cli/index.md +1 -1
- package/docs/es/configuration.md +42 -1
- package/docs/es/intlayer_CMS.md +5 -140
- package/docs/es/live-sync.md +176 -0
- package/docs/es/releases/v9.md +45 -1
- package/docs/fr/cli/index.md +1 -1
- package/docs/fr/configuration.md +42 -1
- package/docs/fr/intlayer_CMS.md +5 -135
- package/docs/fr/live-sync.md +174 -0
- package/docs/fr/releases/v9.md +45 -1
- package/docs/hi/cli/index.md +1 -1
- package/docs/hi/configuration.md +42 -1
- package/docs/hi/intlayer_CMS.md +5 -128
- package/docs/hi/live-sync.md +174 -0
- package/docs/hi/releases/v9.md +45 -1
- package/docs/id/cli/index.md +1 -1
- package/docs/id/configuration.md +42 -1
- package/docs/id/intlayer_CMS.md +5 -139
- package/docs/id/live-sync.md +185 -0
- package/docs/id/releases/v9.md +45 -1
- package/docs/it/cli/index.md +1 -1
- package/docs/it/configuration.md +42 -1
- package/docs/it/intlayer_CMS.md +5 -128
- package/docs/it/live-sync.md +174 -0
- package/docs/it/releases/v9.md +45 -1
- package/docs/ja/cli/index.md +1 -1
- package/docs/ja/configuration.md +42 -1
- package/docs/ja/intlayer_CMS.md +5 -139
- package/docs/ja/live-sync.md +185 -0
- package/docs/ja/releases/v9.md +45 -1
- package/docs/ko/cli/index.md +1 -1
- package/docs/ko/configuration.md +42 -1
- package/docs/ko/intlayer_CMS.md +5 -141
- package/docs/ko/live-sync.md +187 -0
- package/docs/ko/releases/v9.md +45 -1
- package/docs/nl/cli/index.md +1 -1
- package/docs/nl/configuration.md +45 -1
- package/docs/pl/cli/index.md +1 -1
- package/docs/pl/configuration.md +45 -1
- package/docs/pl/intlayer_CMS.md +5 -139
- package/docs/pl/live-sync.md +185 -0
- package/docs/pl/releases/v9.md +45 -1
- package/docs/pt/cli/index.md +1 -1
- package/docs/pt/configuration.md +45 -1
- package/docs/pt/intlayer_CMS.md +5 -143
- package/docs/pt/live-sync.md +174 -0
- package/docs/pt/releases/v9.md +45 -1
- package/docs/ru/cli/index.md +1 -1
- package/docs/ru/configuration.md +42 -1
- package/docs/ru/intlayer_CMS.md +5 -139
- package/docs/ru/live-sync.md +185 -0
- package/docs/ru/releases/v9.md +45 -1
- package/docs/tr/cli/index.md +1 -1
- package/docs/tr/configuration.md +42 -1
- package/docs/tr/intlayer_CMS.md +5 -127
- package/docs/tr/live-sync.md +173 -0
- package/docs/tr/releases/v9.md +45 -1
- package/docs/uk/cli/index.md +1 -1
- package/docs/uk/configuration.md +42 -1
- package/docs/uk/intlayer_CMS.md +5 -139
- package/docs/uk/live-sync.md +185 -0
- package/docs/uk/releases/v9.md +45 -1
- package/docs/ur/cli/index.md +1 -1
- package/docs/ur/configuration.md +45 -1
- package/docs/vi/cli/index.md +1 -1
- package/docs/vi/configuration.md +42 -1
- package/docs/vi/intlayer_CMS.md +5 -139
- package/docs/vi/live-sync.md +185 -0
- package/docs/vi/releases/v9.md +45 -1
- package/docs/zh/cli/index.md +1 -1
- package/docs/zh/configuration.md +42 -1
- package/docs/zh/intlayer_CMS.md +5 -129
- package/docs/zh/live-sync.md +175 -0
- package/docs/zh/releases/v9.md +45 -1
- package/package.json +7 -7
- package/src/generated/docs.entry.ts +40 -0
package/docs/en/releases/v9.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-14
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-07-08
|
|
4
4
|
title: New Intlayer v9 - What's new?
|
|
5
|
-
description: Discover what's new in Intlayer v9. Introducing drop-in compatibility packages for popular i18n libraries, support for Collections and Variants,
|
|
5
|
+
description: Discover what's new in Intlayer v9. Introducing drop-in compatibility packages for popular i18n libraries, support for Collections and Variants, self-hosting via Docker Compose, and the new @intlayer/analytics package for content A/B testing.
|
|
6
6
|
keywords:
|
|
7
7
|
- Intlayer
|
|
8
8
|
- Compatibility
|
|
@@ -12,6 +12,8 @@ keywords:
|
|
|
12
12
|
- CMS SDK
|
|
13
13
|
- Self-Hosting
|
|
14
14
|
- Docker
|
|
15
|
+
- Analytics
|
|
16
|
+
- A/B Testing
|
|
15
17
|
- i18next
|
|
16
18
|
- next-intl
|
|
17
19
|
- vue-i18n
|
|
@@ -19,12 +21,16 @@ slugs:
|
|
|
19
21
|
- doc
|
|
20
22
|
- releases
|
|
21
23
|
- v9
|
|
24
|
+
history:
|
|
25
|
+
- version: 9.0.0
|
|
26
|
+
date: 2026-07-08
|
|
27
|
+
changes: "Add @intlayer/analytics: page/locale + content-exposure tracking, A/B testing, and the dashboard Analytics page"
|
|
22
28
|
author: aymericzip
|
|
23
29
|
---
|
|
24
30
|
|
|
25
31
|
# New Intlayer v9 - What's new?
|
|
26
32
|
|
|
27
|
-
Welcome to Intlayer v9! This major release marks a huge milestone in simplifying the migration path to Intlayer with **Compat Adapter Packages** for major i18n libraries (`react-i18next`, `next-intl`, `vue-i18n`, etc.)
|
|
33
|
+
Welcome to Intlayer v9! This major release marks a huge milestone in simplifying the migration path to Intlayer with **Compat Adapter Packages** for major i18n libraries (`react-i18next`, `next-intl`, `vue-i18n`, etc.), adds support for rich content structures (**Collections** and **Variants**), and introduces **`@intlayer/analytics`** to track content exposure and run A/B tests.
|
|
28
34
|
|
|
29
35
|
## Table of contents
|
|
30
36
|
|
|
@@ -201,6 +207,49 @@ const product = useIntlayer("product-copy", {
|
|
|
201
207
|
|
|
202
208
|
---
|
|
203
209
|
|
|
210
|
+
## `@intlayer/analytics`: content exposure tracking & A/B testing
|
|
211
|
+
|
|
212
|
+
A new optional package, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), tells you which content is actually shown to your visitors — and closes the loop on **Collections & Variants** by letting you A/B test content and measure conversions per variant.
|
|
213
|
+
|
|
214
|
+
- **Provider-level tracking**: `IntlayerProvider` (React / Next.js / React Native) automatically records `page_view` events on load, route change, and locale change.
|
|
215
|
+
- **Node-level tracking**: every `useIntlayer` resolution reports a `content_exposure` event — which dictionary key, key path, locale, and (when applicable) A/B **variant** was displayed. Repeated exposures within a flush window are coalesced.
|
|
216
|
+
- **Deterministic A/B assignment**: `getVariant(experimentKey, variants)` assigns each session to a variant with **no server round-trip**, so there is no flicker before first render.
|
|
217
|
+
- **`useConversion()`**: attribute a goal (signup, click, purchase…) to the variant a session was exposed to.
|
|
218
|
+
- **Zero cost when not installed**: same tree-shakeable pattern as `@intlayer/editor` — dynamic `import()` wrapped in `try/catch`, plus a compile-time env var (`INTLAYER_ANALYTICS_ENABLED`) that dead-code-eliminates the whole integration for apps that don't opt in.
|
|
219
|
+
- **No new config schema**: reuses `editor.backendURL` (ingestion endpoint / self-hosting) and `editor.clientId` (project key, also the enable switch).
|
|
220
|
+
- **Privacy-respecting**: anonymous session hashing (SHA-256, no raw ids stored), no IP storage, coarse country-only geolocation, batched requests roughly every 20 seconds.
|
|
221
|
+
- **Dashboard**: a new **Analytics** page (shown in the sidebar once a project is selected) reports active users, users today, users over the last 7/30/90 days, a visitor evolution graph, and Locales vs. Location breakdowns.
|
|
222
|
+
|
|
223
|
+
```tsx fileName="CTAButton.tsx" codeFormat="tsx"
|
|
224
|
+
import { useConversion } from "react-intlayer";
|
|
225
|
+
|
|
226
|
+
const CTAButton = () => {
|
|
227
|
+
const trackConversion = useConversion();
|
|
228
|
+
|
|
229
|
+
return (
|
|
230
|
+
<button
|
|
231
|
+
onClick={() =>
|
|
232
|
+
trackConversion({
|
|
233
|
+
experimentKey: "homepage-hero",
|
|
234
|
+
variant: "black_friday",
|
|
235
|
+
goal: "cta_click",
|
|
236
|
+
})
|
|
237
|
+
}
|
|
238
|
+
>
|
|
239
|
+
Get started
|
|
240
|
+
</button>
|
|
241
|
+
);
|
|
242
|
+
};
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
```bash packageManager="npm"
|
|
246
|
+
npm install @intlayer/analytics
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
Available today for React, Next.js, and React Native (via `react-intlayer`); other framework bindings (Vue, Svelte, Angular, …) are planned, following the same rollout pattern as `@intlayer/editor`. See the [Analytics documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) for the full guide.
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
204
253
|
## Vite Plugin: Bundled Compiler & Proxy
|
|
205
254
|
|
|
206
255
|
The `intlayer()` Vite plugin now bundles the **compiler** and the **locale-routing proxy** directly, so most projects only need a single plugin in `vite.config.ts`:
|
|
@@ -334,6 +383,7 @@ If you are upgrading from v8, note that the v9 does not include breaking changes
|
|
|
334
383
|
|
|
335
384
|
- [Compat Adapter Packages Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md)
|
|
336
385
|
- [Dynamic Dictionaries - Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md)
|
|
386
|
+
- [Analytics - Content exposure tracking & A/B testing](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
|
|
337
387
|
- [Configuration Reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
|
|
338
388
|
- [React Native & Expo Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react_native+expo.md)
|
|
339
389
|
- [CMS SDK - Programmatic access with @intlayer/api](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
|
package/docs/en-GB/cli/index.md
CHANGED
|
@@ -125,7 +125,7 @@ To learn how to configure the available languages or other parameters, take a lo
|
|
|
125
125
|
|
|
126
126
|
### Authentication
|
|
127
127
|
|
|
128
|
-
- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/login.md)** - Authenticate with the Intlayer CMS and get the access credentials
|
|
128
|
+
- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/login.md)** - Authenticate with the Intlayer CMS and get the access credentials
|
|
129
129
|
|
|
130
130
|
### Core Commands
|
|
131
131
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-08-13
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-07-11
|
|
4
4
|
title: Configuration
|
|
5
5
|
description: Learn how to configure Intlayer for your application. Understand the various settings and options available to customize Intlayer to your needs.
|
|
6
6
|
keywords:
|
|
@@ -14,6 +14,9 @@ slugs:
|
|
|
14
14
|
- concept
|
|
15
15
|
- configuration
|
|
16
16
|
history:
|
|
17
|
+
- version: 9.0.0
|
|
18
|
+
date: 2026-07-11
|
|
19
|
+
changes: "Add `analytics` configuration"
|
|
17
20
|
- version: 9.0.0
|
|
18
21
|
date: 2026-06-24
|
|
19
22
|
changes: "Add `enableProxy` option to the routing configuration"
|
|
@@ -355,6 +358,30 @@ const config: IntlayerConfig = {
|
|
|
355
358
|
liveSync: true,
|
|
356
359
|
},
|
|
357
360
|
|
|
361
|
+
/**
|
|
362
|
+
* Analytics configuration.
|
|
363
|
+
*/
|
|
364
|
+
analytics: {
|
|
365
|
+
/**
|
|
366
|
+
* Whether analytics collection is enabled (page views, content exposures, A/B events).
|
|
367
|
+
* Requires `editor.clientId` to be set for attribution.
|
|
368
|
+
* Default: false
|
|
369
|
+
*/
|
|
370
|
+
enabled: true,
|
|
371
|
+
|
|
372
|
+
/**
|
|
373
|
+
* Milliseconds between automatic batched flushes to the backend.
|
|
374
|
+
* Default: 20000
|
|
375
|
+
*/
|
|
376
|
+
flushInterval: 20000,
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* Fraction of sessions to record, from 0 (none) to 1 (all).
|
|
380
|
+
* Default: 1
|
|
381
|
+
*/
|
|
382
|
+
sampleRate: 1,
|
|
383
|
+
},
|
|
384
|
+
|
|
358
385
|
/**
|
|
359
386
|
* AI-powered translation and generation settings.
|
|
360
387
|
*/
|
|
@@ -670,6 +697,20 @@ Defines settings related to the integrated editor, including server port and act
|
|
|
670
697
|
| `liveSyncPort` | The port of the live sync server. | `number` | `4000` | `4000` | |
|
|
671
698
|
| `liveSyncURL` | The URL of the live sync server. | `string` | `'http://localhost:{liveSyncPort}'` | `'https://example.com'` | Points to localhost by default; can be changed for a remote live sync server. |
|
|
672
699
|
|
|
700
|
+
### Analytics Configuration
|
|
701
|
+
|
|
702
|
+
Defines settings related to Intlayer analytics: collecting which content is actually shown to users (page views, content exposures) and powering content A/B testing.
|
|
703
|
+
|
|
704
|
+
Analytics is strictly opt-in: nothing is collected unless `analytics.enabled` is explicitly set to `true` **and** a project key (`editor.clientId`) is configured for attribution. When disabled (the default), the whole analytics integration is dead-code-eliminated from your application bundle.
|
|
705
|
+
|
|
706
|
+
| Field | Description | Type | Default | Example | Note |
|
|
707
|
+
| --------------- | ------------------------------------------------------------------------- | --------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
708
|
+
| `enabled` | Enables analytics collection (page views, content exposures, A/B events). | `boolean` | `false` | `true` | Requires `editor.clientId` to be set for attribution; otherwise analytics stays disabled even if `enabled` is `true`. |
|
|
709
|
+
| `flushInterval` | Milliseconds between automatic batched flushes to the backend. | `number` | `20000` | `10000` | |
|
|
710
|
+
| `sampleRate` | Fraction of sessions to record, from `0` (none) to `1` (all). | `number` | `1` | `0.5` | Sampling is deterministic per session, so a recorded session reports all of its events (no partial funnels). |
|
|
711
|
+
|
|
712
|
+
---
|
|
713
|
+
|
|
673
714
|
### Routing Configuration
|
|
674
715
|
|
|
675
716
|
Settings that control routing behavior, including URL structure, locale storage, and middleware handling.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2025-08-23
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-07-08
|
|
4
4
|
title: Intlayer CMS | Externalise your content into the Intlayer CMS
|
|
5
5
|
description: Externalise your content into the Intlayer CMS to delegate the management of your content to your team.
|
|
6
6
|
keywords:
|
|
@@ -18,6 +18,9 @@ slugs:
|
|
|
18
18
|
- cms
|
|
19
19
|
youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
|
|
20
20
|
history:
|
|
21
|
+
- version: 9.0.0
|
|
22
|
+
date: 2026-07-08
|
|
23
|
+
changes: "Move Live Sync section to its own page (live-sync.md), keep a short intro + link here"
|
|
21
24
|
- version: 9.0.0
|
|
22
25
|
date: 2026-06-30
|
|
23
26
|
changes: "Add Self-Hosting section"
|
|
@@ -248,133 +251,7 @@ You will then be able to view and manage your dictionary in the [Intlayer CMS](h
|
|
|
248
251
|
|
|
249
252
|
Live Sync allows your app to reflect CMS content changes at runtime. No rebuild or redeploy is required. When enabled, updates are streamed to a Live Sync server that refreshes the dictionaries your application reads.
|
|
250
253
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
Enable Live Sync by updating your Intlayer configuration:
|
|
254
|
-
|
|
255
|
-
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
256
|
-
import type { IntlayerConfig } from "intlayer";
|
|
257
|
-
|
|
258
|
-
const config: IntlayerConfig = {
|
|
259
|
-
// ... other configuration settings
|
|
260
|
-
editor: {
|
|
261
|
-
/**
|
|
262
|
-
* Enables hot reloading of locale configurations when changes are detected.
|
|
263
|
-
* For example, when a dictionary is added or updated, the application updates
|
|
264
|
-
* the content displayed on the page.
|
|
265
|
-
*
|
|
266
|
-
* Because hot reloading requires a continuous connection to the server, it is
|
|
267
|
-
* only available for clients of the `enterprise` plan.
|
|
268
|
-
*
|
|
269
|
-
* Default: false
|
|
270
|
-
*/
|
|
271
|
-
liveSync: true,
|
|
272
|
-
},
|
|
273
|
-
dictionary: {
|
|
274
|
-
/**
|
|
275
|
-
* Controls how dictionaries are imported:
|
|
276
|
-
*
|
|
277
|
-
* - "fetch": Dictionaries are fetched dynamically using the Live Sync API.
|
|
278
|
-
* Replaces useIntlayer with useDictionaryDynamic.
|
|
279
|
-
*
|
|
280
|
-
* Note: Live mode uses the Live Sync API to fetch dictionaries. If the API call
|
|
281
|
-
* fails, dictionaries are imported dynamically.
|
|
282
|
-
* Note: Only dictionaries with remote content and "live" flags use live mode.
|
|
283
|
-
* Others use dynamic mode for performance.
|
|
284
|
-
*/
|
|
285
|
-
importMode: "fetch",
|
|
286
|
-
},
|
|
287
|
-
};
|
|
288
|
-
|
|
289
|
-
export default config;
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
Start the Live Sync server to wrap your application:
|
|
293
|
-
|
|
294
|
-
Example using Next.js:
|
|
295
|
-
|
|
296
|
-
```json5 fileName="package.json"
|
|
297
|
-
{
|
|
298
|
-
"scripts": {
|
|
299
|
-
// ... other scripts
|
|
300
|
-
"build": "next build",
|
|
301
|
-
"dev": "next dev",
|
|
302
|
-
"start": "npx intlayer live --with 'next start'",
|
|
303
|
-
},
|
|
304
|
-
}
|
|
305
|
-
```
|
|
306
|
-
|
|
307
|
-
Example using Vite:
|
|
308
|
-
|
|
309
|
-
```json5 fileName="package.json"
|
|
310
|
-
{
|
|
311
|
-
"scripts": {
|
|
312
|
-
// ... other scripts
|
|
313
|
-
"build": "vite build",
|
|
314
|
-
"dev": "vite dev",
|
|
315
|
-
"start": "npx intlayer live --with 'vite start'",
|
|
316
|
-
},
|
|
317
|
-
}
|
|
318
|
-
```
|
|
319
|
-
|
|
320
|
-
The Live Sync server wraps your application and automatically applies updated content as it arrives.
|
|
321
|
-
|
|
322
|
-
To receive change notifications from the CMS, the Live Sync server maintains an SSE connection to the backend. When content changes in the CMS, the backend forwards the update to the Live Sync server, which writes the new dictionaries. Your application will reflect the update on the next navigation or browser reload, no rebuild required.
|
|
323
|
-
|
|
324
|
-
Flow chart (CMS/Backend -> Live Sync Server -> Application Server -> Frontend):
|
|
325
|
-
|
|
326
|
-

|
|
327
|
-
|
|
328
|
-
How it works:
|
|
329
|
-
|
|
330
|
-

|
|
331
|
-
|
|
332
|
-
### Development workflow (local)
|
|
333
|
-
|
|
334
|
-
- In development, all remote dictionaries are fetched when the application starts, so you can test updates quickly.
|
|
335
|
-
- To test Live Sync locally with Next.js, wrap your dev server:
|
|
336
|
-
|
|
337
|
-
```json5 fileName="package.json"
|
|
338
|
-
{
|
|
339
|
-
"scripts": {
|
|
340
|
-
// ... other scripts
|
|
341
|
-
"dev": "npx intlayer live --with 'next dev'",
|
|
342
|
-
// "dev": "npx intlayer live --with 'vite dev'", // For Vite
|
|
343
|
-
},
|
|
344
|
-
}
|
|
345
|
-
```
|
|
346
|
-
|
|
347
|
-
Enable optimisation so Intlayer applies the Live import transformations during development:
|
|
348
|
-
|
|
349
|
-
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
350
|
-
import type { IntlayerConfig } from "intlayer";
|
|
351
|
-
|
|
352
|
-
const config: IntlayerConfig = {
|
|
353
|
-
editor: {
|
|
354
|
-
applicationURL: "http://localhost:5173",
|
|
355
|
-
liveSyncURL: "http://localhost:4000",
|
|
356
|
-
liveSync: true,
|
|
357
|
-
},
|
|
358
|
-
dictionary: {
|
|
359
|
-
importMode: "fetch",
|
|
360
|
-
},
|
|
361
|
-
build: {
|
|
362
|
-
optimize: true,
|
|
363
|
-
},
|
|
364
|
-
};
|
|
365
|
-
|
|
366
|
-
export default config;
|
|
367
|
-
```
|
|
368
|
-
|
|
369
|
-
This setup wraps your dev server with the Live Sync server, fetches remote dictionaries at startup, and streams updates from the CMS via SSE. Refresh the page to see changes.
|
|
370
|
-
|
|
371
|
-
Notes and constraints:
|
|
372
|
-
|
|
373
|
-
- Add the live sync origin to your site security policy (CSP). Ensure the live sync URL is allowed in `connect-src` (and `frame-ancestors` if relevant).
|
|
374
|
-
- Live Sync does not work with static output. For Next.js, the page must be dynamic to receive updates at runtime (e.g., use `generateStaticParams`, `generateMetadata`, `getServerSideProps`, or `getStaticProps` appropriately to avoid full static-only constraints).
|
|
375
|
-
- In the CMS, each dictionary has a `live` flag. Only dictionaries with `live=true` are fetched via the live sync API; others are imported dynamically and remain unchanged at runtime.
|
|
376
|
-
- The `live` flag is evaluated for each dictionary at build time. If remote content was not flagged `live=true` during build, you must rebuild to enable Live Sync for that dictionary.
|
|
377
|
-
- The live sync server must be able to write to `.intlayer`. In containers, ensure write access to `/.intlayer`.
|
|
254
|
+
For the full setup guide (configuration, starting the Live Sync server, the local development workflow, and constraints), see the [Live Sync documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/live-sync.md).
|
|
378
255
|
|
|
379
256
|
## Self-Hosting
|
|
380
257
|
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2026-07-08
|
|
3
|
+
updatedAt: 2026-07-08
|
|
4
|
+
title: Live Sync | Reflect CMS content changes at runtime
|
|
5
|
+
description: Let your app reflect Intlayer CMS content changes at runtime, with no rebuild or redeploy required.
|
|
6
|
+
keywords:
|
|
7
|
+
- Live Sync
|
|
8
|
+
- CMS
|
|
9
|
+
- Visual Editor
|
|
10
|
+
- Internationalisation
|
|
11
|
+
- Documentation
|
|
12
|
+
- Intlayer
|
|
13
|
+
- Next.js
|
|
14
|
+
- Vite
|
|
15
|
+
history:
|
|
16
|
+
- version: 9.0.0
|
|
17
|
+
date: 2026-07-08
|
|
18
|
+
changes: "Extracted from the Intlayer CMS documentation into its own page"
|
|
19
|
+
- version: 6.0.1
|
|
20
|
+
date: 2025-09-22
|
|
21
|
+
changes: "Add live sync documentation"
|
|
22
|
+
- version: 6.0.0
|
|
23
|
+
date: 2025-09-04
|
|
24
|
+
changes: "Replace `hotReload` field with `liveSync`"
|
|
25
|
+
author: aymericzip
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
# Live sync
|
|
29
|
+
|
|
30
|
+
Live Sync allows your app to reflect CMS content changes at runtime. No rebuild or redeploy is required. When enabled, updates are streamed to a Live Sync server that refreshes the dictionaries your application reads.
|
|
31
|
+
|
|
32
|
+
## Table of contents
|
|
33
|
+
|
|
34
|
+
<TOC/>
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Enabling Live Sync
|
|
39
|
+
|
|
40
|
+
> Live Sync requires a continuous server connection and is available on the enterprise plan.
|
|
41
|
+
|
|
42
|
+
Enable Live Sync by updating your Intlayer configuration:
|
|
43
|
+
|
|
44
|
+
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
45
|
+
import type { IntlayerConfig } from "intlayer";
|
|
46
|
+
|
|
47
|
+
const config: IntlayerConfig = {
|
|
48
|
+
// ... other configuration settings
|
|
49
|
+
editor: {
|
|
50
|
+
/**
|
|
51
|
+
* Enables hot reloading of locale configurations when changes are detected.
|
|
52
|
+
* For example, when a dictionary is added or updated, the application updates
|
|
53
|
+
* the content displayed on the page.
|
|
54
|
+
*
|
|
55
|
+
* Because hot reloading requires a continuous connection to the server, it is
|
|
56
|
+
* only available for clients of the `enterprise` plan.
|
|
57
|
+
*
|
|
58
|
+
* Default: false
|
|
59
|
+
*/
|
|
60
|
+
liveSync: true,
|
|
61
|
+
},
|
|
62
|
+
dictionary: {
|
|
63
|
+
/**
|
|
64
|
+
* Controls how dictionaries are imported:
|
|
65
|
+
*
|
|
66
|
+
* - "fetch": Dictionaries are fetched dynamically using the Live Sync API.
|
|
67
|
+
* Replaces useIntlayer with useDictionaryDynamic.
|
|
68
|
+
*
|
|
69
|
+
* Note: Live mode uses the Live Sync API to fetch dictionaries. If the API call
|
|
70
|
+
* fails, dictionaries are imported dynamically.
|
|
71
|
+
* Note: Only dictionaries with remote content and "live" flags use live mode.
|
|
72
|
+
* Others use dynamic mode for performance.
|
|
73
|
+
*/
|
|
74
|
+
importMode: "fetch",
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export default config;
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Start the Live Sync server to wrap your application:
|
|
82
|
+
|
|
83
|
+
Example using Next.js:
|
|
84
|
+
|
|
85
|
+
```json5 fileName="package.json"
|
|
86
|
+
{
|
|
87
|
+
"scripts": {
|
|
88
|
+
// ... other scripts
|
|
89
|
+
"build": "next build",
|
|
90
|
+
"dev": "next dev",
|
|
91
|
+
"start": "npx intlayer live --with 'next start'",
|
|
92
|
+
},
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Example using Vite:
|
|
97
|
+
|
|
98
|
+
```json5 fileName="package.json"
|
|
99
|
+
{
|
|
100
|
+
"scripts": {
|
|
101
|
+
// ... other scripts
|
|
102
|
+
"build": "vite build",
|
|
103
|
+
"dev": "vite dev",
|
|
104
|
+
"start": "npx intlayer live --with 'vite start'",
|
|
105
|
+
},
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
The Live Sync server wraps your application and automatically applies updated content as it arrives.
|
|
110
|
+
|
|
111
|
+
To receive change notifications from the CMS, the Live Sync server maintains an SSE connection to the backend. When content changes in the CMS, the backend forwards the update to the Live Sync server, which writes the new dictionaries. Your application will reflect the update on the next navigation or browser reload, no rebuild required.
|
|
112
|
+
|
|
113
|
+
Flow chart (CMS/Backend -> Live Sync Server -> Application Server -> Frontend):
|
|
114
|
+
|
|
115
|
+

|
|
116
|
+
|
|
117
|
+
How it works:
|
|
118
|
+
|
|
119
|
+

|
|
120
|
+
|
|
121
|
+
## Development workflow (local)
|
|
122
|
+
|
|
123
|
+
- In development, all remote dictionaries are fetched when the application starts, so you can test updates quickly.
|
|
124
|
+
- To test Live Sync locally with Next.js, wrap your dev server:
|
|
125
|
+
|
|
126
|
+
```json5 fileName="package.json"
|
|
127
|
+
{
|
|
128
|
+
"scripts": {
|
|
129
|
+
// ... other scripts
|
|
130
|
+
"dev": "npx intlayer live --with 'next dev'",
|
|
131
|
+
// "dev": "npx intlayer live --with 'vite dev'", // For Vite
|
|
132
|
+
},
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
Enable optimisation so Intlayer applies the Live import transformations during development:
|
|
137
|
+
|
|
138
|
+
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
|
|
139
|
+
import type { IntlayerConfig } from "intlayer";
|
|
140
|
+
|
|
141
|
+
const config: IntlayerConfig = {
|
|
142
|
+
editor: {
|
|
143
|
+
applicationURL: "http://localhost:5173",
|
|
144
|
+
liveSyncURL: "http://localhost:4000",
|
|
145
|
+
liveSync: true,
|
|
146
|
+
},
|
|
147
|
+
dictionary: {
|
|
148
|
+
importMode: "fetch",
|
|
149
|
+
},
|
|
150
|
+
build: {
|
|
151
|
+
optimize: true,
|
|
152
|
+
},
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
export default config;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
This setup wraps your dev server with the Live Sync server, fetches remote dictionaries at startup, and streams updates from the CMS via SSE. Refresh the page to see changes.
|
|
159
|
+
|
|
160
|
+
## Notes and constraints
|
|
161
|
+
|
|
162
|
+
- Add the live sync origin to your site security policy (CSP). Ensure the live sync URL is allowed in `connect-src` (and `frame-ancestors` if relevant).
|
|
163
|
+
- Live Sync does not work with static output. For Next.js, the page must be dynamic to receive updates at runtime (e.g., use `generateStaticParams`, `generateMetadata`, `getServerSideProps`, or `getStaticProps` appropriately to avoid full static-only constraints).
|
|
164
|
+
- In the CMS, each dictionary has a `live` flag. Only dictionaries with `live=true` are fetched via the live sync API; others are imported dynamically and remain unchanged at runtime.
|
|
165
|
+
- The `live` flag is evaluated for each dictionary at build time. If remote content was not flagged `live=true` during build, you must rebuild to enable Live Sync for that dictionary.
|
|
166
|
+
- The live sync server must be able to write to `.intlayer`. In containers, ensure write access to `/.intlayer`.
|
|
167
|
+
|
|
168
|
+
## Useful links
|
|
169
|
+
|
|
170
|
+
- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md)
|
|
171
|
+
- [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md)
|
|
172
|
+
- [Configuration Reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md)
|
|
173
|
+
- [Self-Hosting Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/self_hosting.md)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2026-06-14
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-07-08
|
|
4
4
|
title: New Intlayer v9 - What's new?
|
|
5
5
|
description: Discover what's new in Intlayer v9. Introducing drop-in compatibility packages for popular i18n libraries, support for Collections and Variants, and self-hosting via Docker Compose.
|
|
6
6
|
keywords:
|
|
@@ -201,6 +201,49 @@ const product = useIntlayer("product-copy", {
|
|
|
201
201
|
|
|
202
202
|
---
|
|
203
203
|
|
|
204
|
+
## `@intlayer/analytics`: content exposure tracking & A/B testing
|
|
205
|
+
|
|
206
|
+
A new optional package, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), tells you which content is actually shown to your visitors — and closes the loop on **Collections & Variants** by letting you A/B test content and measure conversions per variant.
|
|
207
|
+
|
|
208
|
+
- **Provider-level tracking**: `IntlayerProvider` (React / Next.js / React Native) automatically records `page_view` events on load, route change, and locale change.
|
|
209
|
+
- **Node-level tracking**: every `useIntlayer` resolution reports a `content_exposure` event — which dictionary key, key path, locale, and (when applicable) A/B **variant** was displayed. Repeated exposures within a flush window are coalesced.
|
|
210
|
+
- **Deterministic A/B assignment**: `getVariant(experimentKey, variants)` assigns each session to a variant with **no server round-trip**, so there is no flicker before first render.
|
|
211
|
+
- **`useConversion()`**: attribute a goal (signup, click, purchase…) to the variant a session was exposed to.
|
|
212
|
+
- **Zero cost when not installed**: same tree-shakeable pattern as `@intlayer/editor` — dynamic `import()` wrapped in `try/catch`, plus a compile-time env var (`INTLAYER_ANALYTICS_ENABLED`) that dead-code-eliminates the whole integration for apps that don't opt in.
|
|
213
|
+
- **No new config schema**: reuses `editor.backendURL` (ingestion endpoint / self-hosting) and `editor.clientId` (project key, also the enable switch).
|
|
214
|
+
- **Privacy-respecting**: anonymous session hashing (SHA-256, no raw ids stored), no IP storage, coarse country-only geolocation, batched requests roughly every 20 seconds.
|
|
215
|
+
- **Dashboard**: a new **Analytics** page (shown in the sidebar once a project is selected) reports active users, users today, users over the last 7/30/90 days, a visitor evolution graph, and Locales vs. Location breakdowns.
|
|
216
|
+
|
|
217
|
+
```tsx fileName="CTAButton.tsx" codeFormat="tsx"
|
|
218
|
+
import { useConversion } from "react-intlayer";
|
|
219
|
+
|
|
220
|
+
const CTAButton = () => {
|
|
221
|
+
const trackConversion = useConversion();
|
|
222
|
+
|
|
223
|
+
return (
|
|
224
|
+
<button
|
|
225
|
+
onClick={() =>
|
|
226
|
+
trackConversion({
|
|
227
|
+
experimentKey: "homepage-hero",
|
|
228
|
+
variant: "black_friday",
|
|
229
|
+
goal: "cta_click",
|
|
230
|
+
})
|
|
231
|
+
}
|
|
232
|
+
>
|
|
233
|
+
Get started
|
|
234
|
+
</button>
|
|
235
|
+
);
|
|
236
|
+
};
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
```bash packageManager="npm"
|
|
240
|
+
npm install @intlayer/analytics
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
Available today for React, Next.js, and React Native (via `react-intlayer`); other framework bindings (Vue, Svelte, Angular, …) are planned, following the same rollout pattern as `@intlayer/editor`. See the [Analytics documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md) for the full guide.
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
204
247
|
## Vite Plugin: Bundled Compiler & Proxy
|
|
205
248
|
|
|
206
249
|
The `intlayer()` Vite plugin now bundles the **compiler** and the **locale-routing proxy** directly, so most projects only need a single plugin in `vite.config.ts`:
|
|
@@ -334,6 +377,7 @@ If you are upgrading from v8, note that the v9 does not include breaking changes
|
|
|
334
377
|
|
|
335
378
|
- [Compat Adapter Packages Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md)
|
|
336
379
|
- [Dynamic Dictionaries - Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md)
|
|
380
|
+
- [Analytics - Content exposure tracking & A/B testing](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
|
|
337
381
|
- [Configuration Reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
|
|
338
382
|
- [CMS SDK - Programmatic access with @intlayer/api](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md)
|
|
339
383
|
- [Self-Hosting Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/self_hosting.md)
|
package/docs/es/cli/index.md
CHANGED
|
@@ -125,7 +125,7 @@ Para ver cómo configurar los locales disponibles u otros parámetros, consulte
|
|
|
125
125
|
|
|
126
126
|
### Autenticación
|
|
127
127
|
|
|
128
|
-
- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/login.md)** - Autenticarse con el CMS de Intlayer y obtener credenciales de acceso
|
|
128
|
+
- **[Login](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/login.md)** - Autenticarse con el CMS de Intlayer y obtener credenciales de acceso
|
|
129
129
|
|
|
130
130
|
### Comandos principales
|
|
131
131
|
|
package/docs/es/configuration.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
createdAt: 2024-08-13
|
|
3
|
-
updatedAt: 2026-
|
|
3
|
+
updatedAt: 2026-07-11
|
|
4
4
|
title: Configuración (Configuration)
|
|
5
5
|
description: Aprenda a configure Intlayer para su aplicación. Entienda los diversos ajustes y opciones disponibles para personalizar Intlayer según sus necesidades.
|
|
6
6
|
keywords:
|
|
@@ -14,6 +14,9 @@ slugs:
|
|
|
14
14
|
- concept
|
|
15
15
|
- configuration
|
|
16
16
|
history:
|
|
17
|
+
- version: 9.0.0
|
|
18
|
+
date: 2026-07-11
|
|
19
|
+
changes: "Se añadió la configuración `analytics`"
|
|
17
20
|
- version: 9.0.0
|
|
18
21
|
date: 2026-06-24
|
|
19
22
|
changes: "Add `enableProxy` option to the routing configuration"
|
|
@@ -355,6 +358,30 @@ const config: IntlayerConfig = {
|
|
|
355
358
|
liveSync: true,
|
|
356
359
|
},
|
|
357
360
|
|
|
361
|
+
/**
|
|
362
|
+
* Configuración de analíticas (analytics).
|
|
363
|
+
*/
|
|
364
|
+
analytics: {
|
|
365
|
+
/**
|
|
366
|
+
* Si la recopilación de analíticas está habilitada (vistas de página, exposiciones de contenido, eventos A/B).
|
|
367
|
+
* Requiere que `editor.clientId` esté configurado para la atribución.
|
|
368
|
+
* Predeterminado: false
|
|
369
|
+
*/
|
|
370
|
+
enabled: true,
|
|
371
|
+
|
|
372
|
+
/**
|
|
373
|
+
* Milisegundos entre los envíos por lotes automáticos al backend.
|
|
374
|
+
* Predeterminado: 20000
|
|
375
|
+
*/
|
|
376
|
+
flushInterval: 20000,
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* Fracción de sesiones a registrar, de 0 (ninguna) a 1 (todas).
|
|
380
|
+
* Predeterminado: 1
|
|
381
|
+
*/
|
|
382
|
+
sampleRate: 1,
|
|
383
|
+
},
|
|
384
|
+
|
|
358
385
|
/**
|
|
359
386
|
* Ajustes de traducción y construcción basados en IA.
|
|
360
387
|
*/
|
|
@@ -671,6 +698,20 @@ Define los ajustes relacionados con el editor integrado, incluido el puerto del
|
|
|
671
698
|
|
|
672
699
|
---
|
|
673
700
|
|
|
701
|
+
### Configuración de Analíticas (Analytics Configuration)
|
|
702
|
+
|
|
703
|
+
Define los ajustes relacionados con las analíticas de Intlayer: la recopilación de qué contenido se muestra realmente a los usuarios (vistas de página, exposiciones de contenido) y el soporte de pruebas A/B sobre el contenido.
|
|
704
|
+
|
|
705
|
+
Las analíticas son estrictamente opcionales (opt-in): no se recopila nada a menos que `analytics.enabled` esté explícitamente establecido en `true` **y** se configure una clave de proyecto (`editor.clientId`) para la atribución. Cuando está deshabilitada (predeterminado), toda la integración de analíticas se elimina del paquete (bundle) de su aplicación (dead-code elimination).
|
|
706
|
+
|
|
707
|
+
| Campo | Descripción | Tipo | Predeterminado | Ejemplo | Nota |
|
|
708
|
+
| --------------- | -------------------------------------------------------------------------------------------------- | --------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
709
|
+
| `enabled` | Habilita la recopilación de analíticas (vistas de página, exposiciones de contenido, eventos A/B). | `boolean` | `false` | `true` | Requiere que `editor.clientId` esté configurado para la atribución; de lo contrario, las analíticas permanecen deshabilitadas aunque `enabled` sea `true`. |
|
|
710
|
+
| `flushInterval` | Milisegundos entre los envíos por lotes automáticos al backend. | `number` | `20000` | `10000` | |
|
|
711
|
+
| `sampleRate` | Fracción de sesiones a registrar, de `0` (ninguna) a `1` (todas). | `number` | `1` | `0.5` | El muestreo es determinista por sesión, por lo que una sesión registrada reporta todos sus eventos (sin embudos parciales). |
|
|
712
|
+
|
|
713
|
+
---
|
|
714
|
+
|
|
674
715
|
### Configuración de Enrutamiento (Routing Configuration)
|
|
675
716
|
|
|
676
717
|
Ajustes que controlan el comportamiento del enrutamiento, incluida la estructura de la URL, el almacenamiento de localidades y el manejo del middleware.
|