@intlayer/docs 9.5.4 → 9.5.5

package/docs/pl/intlayer_with_remix_3.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-09
-updatedAt: 2026-09-11
+updatedAt: 2026-09-19
 title: "Remix 3 i18n - Kompletny przewodnik po tłumaczeniu aplikacji"
 description: "Zapomnij o i18next. Przewodnik 2026 po tworzeniu wielojęzycznej (i18n) aplikacji Remix 3. Tłumacz za pomocą agentów AI i optymalizuj rozmiar paczki, SEO oraz wydajność."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-remix-3-template
 applicationShowcase: https://intlayer-remix-3-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Użycie middleware i hooków remix-intlayer"
   - version: 9.5.0
     date: 2026-09-09
     changes: "Początkowa dokumentacja dla Remix 3"
@@ -39,7 +42,7 @@ Ten przewodnik pokazuje, jak zintegrować **Intlayer** w celu bezproblemowej int
 - **`remix/node-fetch-server`**: Adaptery serwerowe dla Node.js z natywnym wsparciem dla Bun, Deno i środowisk edge.
 - **`remix/cookie`**: Kryptograficznie podpisane parsowanie i serializacja ciasteczek.
 
-W połączeniu z **Intlayer** otrzymujesz kompletny system internacjonalizacji zapewniający bezpieczeństwo typów w czasie kompilacji, zautomatyzowane tłumaczenia AI, renderowanie po stronie serwera bez dodatkowego narzutu oraz intuicyjny routing językowy.
+W połączeniu z **Intlayer** i pakietem **`remix-intlayer`**, middleware ustawień regionalnych oraz tymi samymi hookami `useIntlayer` / `useDictionary` / `useLocale` co w `react-intlayer`, powiązanymi z kontekstem żądania Remix, otrzymujesz kompletny system internacjonalizacji zapewniający bezpieczeństwo typów w czasie kompilacji, automatyczne tłumaczenia AI, renderowanie serwerowe bez narzutu i płynne trasowanie językowe.
 
 ## Spis treści
 
@@ -52,7 +55,7 @@ W porównaniu z tradycyjnymi rozwiązaniami, takimi jak `i18next` czy dedykowane
 <AccordionGroup>
 <Accordion header="Pełna obsługa Remix 3 i standardów webowych">
 
-Intlayer został stworzony do bezproblemowej współpracy ze standardami sieciowymi (`Request`, `Response`, `Headers` oraz `URL`). Integruje się z routerem Fetch w Remix 3 za pomocą lekkiego middleware, pobierając język ze ścieżki URL, ciasteczek lub nagłówków `Accept-Language` bez uzależniania od środowiska wykonawczego.
+Intlayer został zbudowany z myślą o bezproblemowej współpracy ze standardami sieciowymi (`Request`, `Response`, `Headers` i `URL`). `remix-intlayer` integruje się z routerem Fetch Remix 3 jako lekkie middleware, pobierając ustawienia regionalne ze ścieżek URL, plików cookie lub nagłówków `Accept-Language` i udostępniając je reszcie żądania, procedurom obsługi, widokom i komponentom `remix/ui`, bez konieczności przekazywania ich jako argumentów.
 
 </Accordion>
 <Accordion header="Bezpieczne pod kątem typów deklaracje treści">
@@ -109,25 +112,26 @@ Zobacz [Szablon Aplikacji](https://github.com/aymericzip/intlayer-remix-3-templa
 <Steps>
 <Step number={1} title="Instalacja zależności">
 
-Zainstaluj `intlayer` oraz `remix` (wersja 3) za pomocą wybranego menedżera pakietów:
+Zainstaluj `intlayer`, `remix-intlayer` i `remix` (wersja 3) za pomocą preferowanego menedżera pakietów:
 
 ```bash packageManager="npm"
-npm install intlayer remix@next
+npm install intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer remix@next
+pnpm add intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer remix@next
+yarn add intlayer remix-intlayer remix@next
 ```
 
 ```bash packageManager="bun"
-bun add intlayer remix@next
+bun add intlayer remix-intlayer remix@next
 ```
 
 - **`intlayer`**: Główny silnik internacjonalizacji zapewniający zarządzanie konfiguracją, deklarację słowników (`t()`, `Dictionary`), narzędzia CLI oraz interpreter czasu wykonania.
+- **`remix-intlayer`**: Integracja z Remix 3: middleware routera `intlayer()`, które rozpoznaje ustawienia regionalne każdego żądania, oraz hooki `useIntlayer`, `useDictionary` i `useLocale`, które odczytują je w dowolnym miejscu poniżej.
 - **`remix`**: Ujednolicony pakiet frameworka Remix 3 eksportujący `remix/router`, `remix/routes`, `remix/ui`, `remix/middleware/render` oraz `remix/node-fetch-server`.
 
 </Step>
@@ -239,65 +243,30 @@ bun x intlayer build
 To polecenie kompiluje zawartość do katalogu `.intlayer`, zapewniając autouzupełnianie w TypeScript i szybki dostęp do słowników.
 
 </Step>
-<Step number={5} title="Implementacja middleware Intlayer">
-
-Remix 3 oferuje potok middleware za pośrednictwem `createRouter({ middleware: [...] })`.
-
-Utwórz middleware Intlayer, które ustala język dla każdego przychodzącego żądania na podstawie:
-
-1. Prefiksu ścieżki URL za pośrednictwem `getLocaleFromPath` (np. `/pl` lub `/fr`).
-2. Funkcji pomocniczej `getLocale`, która sprawdza pliki cookie (`INTLAYER_LOCALE`), niestandardowe nagłówki (`x-intlayer-locale`), standardowe nagłówki `Accept-Language` oraz zdefiniowany `defaultLocale`.
-
-```typescript fileName="src/middleware/intlayer.ts" codeFormat={["typescript", "esm"]}
-import {
-  defaultLocale,
-  getCookie,
-  getLocale,
-  getLocaleFromPath,
-  type Locale,
-} from "intlayer";
-import { createContextKey, type Middleware } from "remix/router";
-
-/**
- * Bezpieczny pod kątem typów klucz kontekstu do pobierania języka z RequestContext Remix 3.
- */
-export const localeKey = createContextKey<Locale>(defaultLocale);
-
-/**
- * Middleware Intlayer dla Remix 3.
- *
- * Ustala język żądania według priorytetu:
- * 1. Prefiks ścieżki URL (np. `/pl/...`) za pomocą `getLocaleFromPath`
- * 2. Negocjacja nagłówków i pamięci za pomocą `getLocale` (cookie, nagłówek niestandardowy, Accept-Language, domyślna wartość defaultLocale)
- *
- * Dołącza ustalony język do RequestContext w Remix 3.
- */
-export const intlayer = (): Middleware => {
-  return async (context, next) => {
-    // Wykrywanie ścieżki (/pl/about -> "pl", /about -> undefined)
-    const pathLocale = getLocaleFromPath(context.url.pathname);
-
-    if (pathLocale) {
-      // Dołącz ustalony język do kontekstu żądania Remix 3
-      context.set(localeKey, pathLocale);
-
-      return next();
-    }
-
-    const storedLocale = await getLocale({
-      getHeader: (name) => context.headers.get(name),
-      getCookie: (name) =>
-        getCookie(name, context.headers.get("cookie") ?? undefined),
-    });
-
-    // Dołącz ustalony język do kontekstu żądania Remix 3
-    context.set(localeKey, storedLocale ?? defaultLocale);
-
-    return next();
-  };
-};
+<Step number={5} title="Dodaj middleware Intlayer">
+
+Remix 3 zapewnia konfigurowalny potok middleware za pośrednictwem `createRouter({ middleware: [...] })`.
+
+`remix-intlayer` dostarcza middleware `intlayer()`. Dla każdego przychodzącego żądania rozpoznaje ustawienia regionalne przy użyciu:
+
+1. Adresu URL, w każdym trybie trasowania oprócz `no-prefix`: prefiksu ścieżki (np. `/pl` lub `/en`) lub parametru wyszukiwania `?locale=`.
+2. Ustawień regionalnych zapisanych przez klienta: pliku cookie (`INTLAYER_LOCALE`) lub niestandardowego nagłówka (`x-intlayer-locale`).
+3. Standardowej negocjacji `Accept-Language`, z powrotem do skonfigurowanego `defaultLocale`.
+
+Wynik jest przechowywany w kontekście żądania Remix jako `context.intlayer` (lub `context.get(Intlayer)`), z wartościami `locale`, `defaultLocale` i `availableLocales`. Następnie middleware uruchamia resztę żądania w zakresie `AsyncLocalStorage` powiązanym z tym kontekstem, co pozwala hookom pakietu odczytywać ustawienia regionalne bez argumentów, zarówno w procedurach obsługi tras, widokach, jak i komponentach `remix/ui`:
+
+```typescript
+import { useIntlayer, useLocale } from "remix-intlayer";
+
+// W dowolnym miejscu poniżej middleware
+const { locale, availableLocales } = useLocale();
+const { title } = useIntlayer("home");
 ```
 
+`useIntlayer("home", "fr")` lub `useIntlayer("faq", { item: 2 })` nadpisują ustawienia regionalne żądania dla jednego wywołania, a `useDictionary(homeContent)` odczytuje zaimportowany słownik zamiast klucza. Poza żądaniem hooki powracają do domyślnych ustawień regionalnych.
+
+> Middleware przygotowuje również słowniki Intlayer podczas uruchamiania serwera, dzięki czemu brakujące `intlayer build` nie pozostawia rejestru pustego.
+
 </Step>
 <Step number={6} title="Definiowanie bezpiecznych typowo tras">
 
@@ -327,89 +296,81 @@ routes.localizedHome.href({ locale: "pl" }); // "/pl"
 
 Remix 3 używa `remix/ui` do komponentów JSX. Komponent to **funkcja konfiguracyjna (setup function)**, która zwraca **funkcję renderującą (render function)**. Props są przekazywane przez typowany `handle` (na przykład `handle.props.locale`):
 
-Utwórz współdzieloną powłokę dokumentu HTML:
+Zacznij od współdzielonej powłoki `Document`, która ustawia atrybuty `<html lang="..." dir="...">` na podstawie ustawień regionalnych rozpoznanych przez middleware:
 
 ```tsx fileName="src/views/document.tsx" codeFormat={["typescript", "esm"]}
-import type { SetupFunction } from "remix/ui";
+import { getHTMLTextDir } from "intlayer";
+import { useLocale } from "remix-intlayer";
+import type { Handle, RemixNode } from "remix/ui";
 
-export const Document: SetupFunction<{
+type DocumentProps = {
   title: string;
-  lang?: string;
-  dir?: string;
-  children?: any;
-}> = (handle) => {
-  return () => {
-    const { title, lang = "en", dir = "ltr", children } = handle.props;
-
-    return (
-      <html lang={lang} dir={dir}>
-        <head>
-          <meta charSet="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <title>{title}</title>
-        </head>
-        <body>{children}</body>
-      </html>
-    );
-  };
+  children?: RemixNode;
+};
+
+export const Document = (handle: Handle<DocumentProps>) => () => {
+  const { title, children } = handle.props;
+  const { locale } = useLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title}</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
 };
 ```
 
-Następnie utwórz widok strony głównej. Użyj `getIntlayer`, aby pobrać zawartość słownika dla aktywnego języka, i wyrenderuj przełącznik języków za pomocą `getLocalizedPath`:
+Następnie utwórz stronę główną. Odczytuje ona zlokalizowany słownik za pomocą `useIntlayer` i renderuje przełącznik języków:
 
 ```tsx fileName="src/views/home.tsx" codeFormat={["typescript", "esm"]}
-import {
-  getIntlayer,
-  getHTMLTextDir,
-  getLocaleName,
-  getLocalizedPath,
-  type Locale,
-  locales,
-} from "intlayer";
-import type { SetupFunction } from "remix/ui";
-import { routes } from "../routes";
+import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
+import { useIntlayer, useLocale } from "remix-intlayer";
 import { Document } from "./document";
 
-export const HomePage: SetupFunction<{ locale: Locale }> = (handle) => {
-  return () => {
-    const { locale } = handle.props;
-    const content = getIntlayer("home", locale);
-
-    return (
-      <Document
-        title={content.title}
-        lang={locale}
-        dir={getHTMLTextDir(locale)}
-      >
-        <header>
-          <nav aria-label="Languages">
-            <span>{content.switchLanguage}</span>
-            {locales.map((loc) => {
-              const href = getLocalizedPath(routes.home.href(), loc);
-              const isActive = loc === locale;
+export const HomePage = () => () => {
+  const { locale, availableLocales } = useLocale();
+  const home = useIntlayer("home");
+  const pathWithoutLocale = getPathWithoutLocale();
+
+  return (
+    <Document title={home.title}>
+      <header>
+        <nav aria-label="Languages">
+          <span>{home.switchLanguage}</span>
+          <ul>
+            {availableLocales.map((localeItem) => {
+              const isActive = localeItem === locale;
+
               return (
-                <a
-                  href={href}
-                  class={isActive ? "active" : undefined}
-                  aria-current={isActive ? "page" : undefined}
-                >
-                  {getLocaleName(loc, locale)}
-                </a>
+                <li key={localeItem} class="p-1">
+                  <a
+                    href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+                    class={isActive ? "active" : undefined}
+                    aria-current={isActive ? "page" : undefined}
+                  >
+                    {getLocaleName(localeItem, locale)}
+                  </a>
+                </li>
               );
             })}
-          </nav>
-        </header>
-        <main>
-          <h1>{content.title}</h1>
-          <p>{content.description}</p>
-        </main>
-      </Document>
-    );
-  };
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <h1>{home.title}</h1>
+        <p>{home.description}</p>
+      </main>
+    </Document>
+  );
 };
 ```
 
-> Remix JSX to nie React: nie ma hooków, `class` zapisuje się bez zmian (zamiast `className`), a komponenty są strumieniowane bezpośrednio do odpowiedzi HTML bez żadnego narzutu JavaScript po stronie klienta.
+> Remix JSX to nie React: `class` jest zapisywane bez zmian (`className` jest również akceptowane), a ponowne renderowanie jest wyzwalane jawnie za pomocą `handle.update()`. Interpolowane wartości są automatycznie uciekane. Hooki Intlayer to zwykłe funkcje odczytujące zakres żądania, więc można je wywoływać zarówno z funkcji konfiguracji (setup), jak i funkcji renderowania.
 
 </Step>
 <Step number={8} title="Łączenie routera i serwera">
@@ -418,45 +379,37 @@ Utwórz `src/router.tsx`, aby zarejestrować middleware i zdefiniować akcje tra
 
 ```tsx fileName="src/router.tsx" codeFormat={["typescript", "esm"]}
 import { isDeclaredLocale } from "intlayer";
+import { intlayer } from "remix-intlayer";
 import { render } from "remix/middleware/render";
 import { createRouter } from "remix/router";
-import { intlayer, localeKey } from "./middleware/intlayer";
 import { routes } from "./routes";
 import { HomePage } from "./views/home";
 
+// 1. Initialize router with Intlayer + render middleware
 export const router = createRouter({
   middleware: [intlayer(), render()],
 });
 
+// 2. Map route handlers
 router.map(routes, {
   actions: {
-    // Trasa dla języka domyślnego (np. /)
+    // Default locale route
     home(context) {
-      const locale = context.get(localeKey);
-      return context.render(<HomePage locale={locale} />);
+      return context.render(<HomePage />);
     },
 
-    // Trasa zlokalizowana (np. /fr, /es)
+    // Localized route
     localizedHome(context) {
-      const { locale } = context.params;
-
-      if (!isDeclaredLocale(locale)) {
+      if (!isDeclaredLocale(context.params.locale)) {
         return new Response("Not Found", { status: 404 });
       }
-
-      return context.render(<HomePage locale={locale} />);
+      return context.render(<HomePage />);
     },
   },
 });
 ```
 
-> `context.render` przyjmuje opcjonalny argument `ResponseInit` jako drugi parametr, co pozwala ustawić niestandardowe nagłówki (np. `Content-Language` lub `Cache-Control`) obok renderowanej strony:
->
-> ```typescript
-> return context.render(<HomePage locale={locale} />, {
->   headers: { "Content-Language": locale },
-> });
-> ```
+> `context.render` przyjmuje opcjonalny `ResponseInit` jako drugi argument, np. `context.render(<NotFoundPage />, { status: 404 })`. Rozpoznane ustawienia regionalne pozostają dostępne z poziomu procedury obsługi jako `context.intlayer.locale`, na przykład w celu utworzenia odpowiedzi `Response.json`.
 
 Teraz połącz `src/server.ts` za pomocą `remix/node-fetch-server` dla Node.js (lub wyeksportuj moduł obsługi `fetch` bezpośrednio dla Bun, Deno lub Cloudflare Workers):
 

package/docs/pl/intlayer_with_tanstack+solid.md

@@ -1257,6 +1257,13 @@ Tak: [formy mnogie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/p
 
 Za pośrednictwem [edytora wizualnego](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md), który działa na Twojej własnej infrastrukturze i pozwala każdemu edytować tekst bezpośrednio w działającej aplikacji, lub systemu [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md), który wyodrębnia treść, dzięki czemu może być zmieniana bez konieczności ponownego wdrażania.
 
+</Question>
+<Question title="Jaki jest koszt edytora wizualnego? Czy to przesada, jeśli go nie potrzebuję?">
+
+[Edytor wizualny Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) generuje **zerowy koszt** dla Twojej aplikacji, jeśli nie jest skonfigurowany. Dodatkowa logika jest ładowana tylko wtedy, gdy jest jawnie włączona i potrzebna.
+
+Nawet po włączeniu narzut jest niezwykle mały (+5 KB, ładowane dynamicznie tylko po aktywacji), ponieważ większość logiki jest obsługiwana przez edytor serwerowy na [app.intlayer.org](https://app.intlayer.org) lub za pośrednictwem pakietu `intlayer-editor`. Jeśli potrzebujesz jedynie prostego rozwiązania do tłumaczenia bez edycji wizualnej, Intlayer nie dodaje żadnego narzutu do Twojej aplikacji.
+
 </Question>
 <Question title="Czy Intlayer jest darmowy i open source?">
 

package/docs/pl/intlayer_with_tanstack.md

@@ -1325,6 +1325,13 @@ Tak: [formy mnogie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/p
 
 Za pośrednictwem [edytora wizualnego](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md), który działa na Twojej własnej infrastrukturze i pozwala każdemu edytować tekst bezpośrednio w działającej aplikacji, lub systemu [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md), który wyodrębnia treść, dzięki czemu może być zmieniana bez konieczności ponownego wdrażania.
 
+</Question>
+<Question title="Jaki jest koszt edytora wizualnego? Czy to przesada, jeśli go nie potrzebuję?">
+
+[Edytor wizualny Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) generuje **zerowy koszt** dla Twojej aplikacji, jeśli nie jest skonfigurowany. Dodatkowa logika jest ładowana tylko wtedy, gdy jest jawnie włączona i potrzebna.
+
+Nawet po włączeniu narzut jest niezwykle mały (+5 KB, ładowane dynamicznie tylko po aktywacji), ponieważ większość logiki jest obsługiwana przez edytor serwerowy na [app.intlayer.org](https://app.intlayer.org) lub za pośrednictwem pakietu `intlayer-editor`. Jeśli potrzebujesz jedynie prostego rozwiązania do tłumaczenia bez edycji wizualnej, Intlayer nie dodaje żadnego narzutu do Twojej aplikacji.
+
 </Question>
 <Question title="Czy Intlayer jest darmowy i open source?">
 

package/docs/pl/intlayer_with_vite+preact.md

@@ -1123,6 +1123,13 @@ Tak: [formy mnogie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/p
 
 Za pośrednictwem [edytora wizualnego](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) w trybie self-hosted, który pozwala każdemu edytować tekst bezpośrednio w działającej aplikacji, lub systemu [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md) dla treści, które muszą zmieniać się bez konieczności ponownego wdrożenia.
 
+</Question>
+<Question title="Jaki jest koszt edytora wizualnego? Czy to przesada, jeśli go nie potrzebuję?">
+
+[Edytor wizualny Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) generuje **zerowy koszt** dla Twojej aplikacji, jeśli nie jest skonfigurowany. Dodatkowa logika jest ładowana tylko wtedy, gdy jest jawnie włączona i potrzebna.
+
+Nawet po włączeniu narzut jest niezwykle mały (+5 KB, ładowane dynamicznie tylko po aktywacji), ponieważ większość logiki jest obsługiwana przez edytor serwerowy na [app.intlayer.org](https://app.intlayer.org) lub za pośrednictwem pakietu `intlayer-editor`. Jeśli potrzebujesz jedynie prostego rozwiązania do tłumaczenia bez edycji wizualnej, Intlayer nie dodaje żadnego narzutu do Twojej aplikacji.
+
 </Question>
 <Question title="Czy Intlayer jest darmowy i open source?">
 

package/docs/pl/intlayer_with_vite+react.md

@@ -1076,6 +1076,13 @@ Tak: [formy mnogie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/p
 
 Za pośrednictwem [edytora wizualnego](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) w trybie self-hosted, który pozwala każdemu edytować tekst bezpośrednio w działającej aplikacji, lub systemu [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md) dla treści, które muszą zmieniać się bez konieczności wdrożenia.
 
+</Question>
+<Question title="Jaki jest koszt edytora wizualnego? Czy to przesada, jeśli go nie potrzebuję?">
+
+[Edytor wizualny Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) generuje **zerowy koszt** dla Twojej aplikacji, jeśli nie jest skonfigurowany. Dodatkowa logika jest ładowana tylko wtedy, gdy jest jawnie włączona i potrzebna.
+
+Nawet po włączeniu narzut jest niezwykle mały (+5 KB, ładowane dynamicznie tylko po aktywacji), ponieważ większość logiki jest obsługiwana przez edytor serwerowy na [app.intlayer.org](https://app.intlayer.org) lub za pośrednictwem pakietu `intlayer-editor`. Jeśli potrzebujesz jedynie prostego rozwiązania do tłumaczenia bez edycji wizualnej, Intlayer nie dodaje żadnego narzutu do Twojej aplikacji.
+
 </Question>
 <Question title="Czy Intlayer jest darmowy i open source?">
 

package/docs/pl/intlayer_with_vite+solid.md

@@ -819,6 +819,13 @@ Tak: [formy mnogie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/p
 
 Za pośrednictwem [edytora wizualnego](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) w trybie self-hosted, który pozwala każdemu edytować tekst bezpośrednio w działającej aplikacji, lub systemu [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md) dla treści, które muszą zmieniać się bez konieczności ponownego wdrożenia.
 
+</Question>
+<Question title="Jaki jest koszt edytora wizualnego? Czy to przesada, jeśli go nie potrzebuję?">
+
+[Edytor wizualny Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) generuje **zerowy koszt** dla Twojej aplikacji, jeśli nie jest skonfigurowany. Dodatkowa logika jest ładowana tylko wtedy, gdy jest jawnie włączona i potrzebna.
+
+Nawet po włączeniu narzut jest niezwykle mały (+5 KB, ładowane dynamicznie tylko po aktywacji), ponieważ większość logiki jest obsługiwana przez edytor serwerowy na [app.intlayer.org](https://app.intlayer.org) lub za pośrednictwem pakietu `intlayer-editor`. Jeśli potrzebujesz jedynie prostego rozwiązania do tłumaczenia bez edycji wizualnej, Intlayer nie dodaje żadnego narzutu do Twojej aplikacji.
+
 </Question>
 <Question title="Czy Intlayer jest darmowy i open source?">