---
title: "Local translation preview"
description: "See validated translations in your running app without rebuilding or publishing."
canonical_url: "https://docs.linguana.dev/docs/build-with-code/local-preview"
markdown_url: "https://docs.linguana.dev/docs/build-with-code/local-preview.md"
x_farming_labs_generated_preamble: true
agent:
  task: "Enable live local translation preview with the canonical Vite integration."
  outcome: "Changed interface copy updates in the selected language without a rebuild."
  prerequisites:
    - "A development project token, an enabled target language, and available organization spending allowance."
  files:
    - "vite.config.ts and the application's existing Linguana provider."
  verification:
    - "Change one source string and observe its translation arrive without navigation, a build, or a release."
    - "Verify hotReload: false prevents preview requests. Never expose the project token to browser code."
  rollback:
    - "Set hotReload: false locally or disable Local translation preview in Projects."
  failureModes:
    - symptom: "Preview shows source or a spending limit."
      resolution: "Check the enabled language, development token, provider status, and project and organization ceilings. Refresh after resolving the block."
---

# Local translation preview
URL: /docs/build-with-code/local-preview
LLM index: /llms.txt
Description: See validated translations in your running app without rebuilding or publishing.

<!-- farming-labs:agent-contract:start -->
## Agent Contract

Task: Enable live local translation preview with the canonical Vite integration.
Outcome: Changed interface copy updates in the selected language without a rebuild.

### Prerequisites

- A development project token, an enabled target language, and available organization spending allowance.

### Files

- `vite.config.ts and the application's existing Linguana provider.`

### Verification

- Change one source string and observe its translation arrive without navigation, a build, or a release.
- Verify hotReload: false prevents preview requests. Never expose the project token to browser code.

### Rollback

- Set hotReload: false locally or disable Local translation preview in Projects.

### Failure Modes

- Preview shows source or a spending limit. — Recovery: Check the enabled language, development token, provider status, and project and organization ceilings. Refresh after resolving the block.
<!-- farming-labs:agent-contract:end -->

# Local translation preview

With `@linguanahq/vite`, local preview is on by default during `vite dev` when a development token is configured. It works with React, Vue, Svelte, Solid, and TanStack Start, including [CLI template apps](/docs/cli/create-app#connected-mode) in connected mode. Next.js does not support local preview; its development server never uploads or requests translations. Select a target language in your app, then edit a heading or button. Source text renders immediately; validated translations arrive through Vite's live connection. No rebuild, page reload, or release is required.

```ts
linguana({
  adapter: linguanaReact(), // Or vue(), svelte(), solid(). TanStack Start uses react().
  projectId: "your-project",
  environment: "development",
  token: process.env.LINGUANA_PROJECT_TOKEN,
  // hotReload: false, // Explicit local opt-out.
  // previewMaxChargeMicros: 50_000, // Optional lower per-request ceiling: $0.05.
})
```

Keep the token in the Vite server process. Never name it with a `VITE_` prefix or pass it to the browser provider. The provider uses the same project ID and `development` environment. Enable target languages in the dashboard. The previous `@linguanahq/compiler` plugin is deprecated; migrate to `@linguanahq/vite` for local preview.

## Preview controls

The small **Local preview** bar shows the selected language, completed strings, and progress. **Show original** compares source wording in place. **Refresh** reads saved corrections and retries after a resolved failure or spending block. **Hide preview controls** dismisses the bar for that page session. Your application state and URL stay intact.

In **Projects → Manage project → Local translation preview**, editors, admins, and owners can switch preview off. The project setting is on by default. `hotReload: false` always disables it locally, including when the dashboard allows it. `upload: false`, a missing token, a non-development environment, or a production build also disable preview.

The dashboard change reaches active development servers within approximately five seconds; the worker checks it again immediately before each provider attempt. Work already in flight may finish and be billed. Disabling preview prevents new attempts and removes the local overlay wording once the setting refreshes.

## Speed and cost

The dev server collects only loaded modules, debounces edits for 250 ms, and submits changed strings for the language being viewed. It starts small batches of up to 20 strings and approximately 2,500 source characters, with at most two pending batches per dev server. A single longer string can use up to 12,000 source characters. Validated memory hits can appear while a job is still queued; generated results appear progressively. Saved human corrections are checked every five seconds.

Generation uses normal **new target character** pricing, not a separate token price. Exact compatible memory hits do not call the model or create a character charge. The default maximum per request is **$0.10**, subordinate to the organization monthly cap. Only the owner can change that dashboard ceiling. A local `previewMaxChargeMicros` can lower it. The request ceiling applies to each small batch, not the entire development session; the organization cap bounds aggregate spending.

The page never waits for generation. A preview provider attempt has a 20-second timeout and no automatic transport retry; a structural repair can use one further attempt. Preview jobs have their own bounded worker queue so long CI catalog jobs do not occupy their slots. Queue and provider latency still vary. On a failure or spending block, the page retains valid existing wording or source and the bar explains the state. Fix the cause, then refresh. Preview never waits for an entire project or every language to finish.

## Review and release

Preview text is a validated draft, visible only through the authenticated development integration. Publishable keys cannot read it. Preview does not create a release catalog or change development, staging, or production release pointers. A later normal build reuses compatible translation memory; review and publish through the existing release workflow.

Context or glossary activation starts compatible preview work on the next settings refresh, without changing current published catalogs. Source snapshots and scope checks prevent late responses from applying after a source or language change. SSR still hydrates the original locale, time zone, direction, and embedded catalog; preview updates begin after the browser mounts.

API content continues to use the public runtime catalog and its separate publication policy. Local preview in this release covers compiler-discovered interface copy, including explicit `t()` and rich-text messages; it does not expose unpublished API content to public browser keys.

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).