Preview the actual screen
Exercise the localized application with its configured catalogs. Distinguish a running server, a catalog comparison and verified language behavior.
These guides use CLI 0.14.7 and the extension 0.7.6 workflow. Install or update the CLI before starting. Confirm that polyglot start --help and polyglot wrap --help expose saved plans. In VS Code, use an extension build that includes Localize one screen and run Update CLI if your selected binary is older.
Download the extension below, then open the VS Code Command Palette and run Extensions: Install from VSIX. Select the downloaded file.
Open a specific screen
polyglot preview --lang fr --route /fr/settingsUse a language already listed in target_languages and a route your app really serves. --route is an app-relative browser path, not a locale-router configuration change. It overrides the route Polyglot would otherwise open. The selected language defaults to your sole configured target; multiple targets require an interactive choice or explicit --lang.
Polyglot resolves the recognized catalog loader and configured layout, including supported next-intl request loaders. It can select recognized locale routes or runtime initializers. For a custom or cookie-based mechanism it may ask you to select the language in your app. Read that message and verify the rendered locale; a reported server URL alone proves no language switch.
Check layout without a hosted translation
polyglot preview --lang fr --route /fr/settings --pseudoApply a plan so the source catalog exists first. Pseudo-preview accents and expands source prose while preserving message arguments and structural placeholders. It makes no translation API request and temporarily overlays the target catalog. It is useful for wiring and layout checks, not a French translation or a semantic language review.
Verify behavior before keeping the patch
- Confirm distinctive target text appears; unchanged English can be fallback from an unloaded catalog.
- Change state and placeholder values after rendering. Check conditional branches and accessible names as well as visible text.
- Exercise links, buttons and rich-message handlers. Check that source-owned code and URLs retain their intended behavior.
- Reload and navigate between locales. For server-rendered apps, test hydration and request isolation appropriate to your runtime.
- Inspect translated metadata and canonical/social URLs where applicable. Keep the patch only after the source-language screen also behaves correctly.
The CLI and editor do not infer runtime success from starting preview, translating a string, or building the app. Dashboard screen checkboxes are your local acknowledgements, not automated evidence.
Stop preview and preserve later edits
Stop the command with Ctrl+C. Preview owns temporary catalog/configuration changes in a durable run and restores original bytes when safe. On Unix it stops its child process group, including surviving server children after a wrapper exits. Native/device lifecycles and Windows child-process behavior have separate limits.
If a file changes while preview is open, restoration refuses to overwrite that newer edit. Startup failure is an error, not a completed preview. After a crash or conflicting cleanup, use the printed run ID or runs, inspect the recovery diff and resolve the conflict before another mutating operation.
polyglot runs
polyglot undo <run-id> --diff
polyglot undo <run-id>Server and export options
| Option | Behavior |
|---|---|
| --cmd "npm run dev -- --port 4000" | Use your app’s development command. |
| --no-open | Start the preview without automatically opening a browser. |
| --no-serve | Generate an independent temporary locale export and print its path; the app is not run or switched. |
| --compare de,fr | Compare the two configured catalog values in a separate HTML report; this is not two running copies of your UI. |
| --compare de,fr --no-serve | Write the comparison HTML to the app directory. |
polyglot preview --lang fr --no-serve
polyglot preview --compare de,fr --no-serveComparison highlights missing entries and relative text length. Exercise each locale in the actual app to check layout and interactions. Export mode has no server lifetime to verify.
Native and unsupported loaders
React Native needs its own Metro, simulator or device workflow; Flutter needs its configured SDK and native run target. A browser preview or renderer/widget fixture does not certify a native device. For an unrecognized loader, keep your existing locale selection and dev command, then verify the screen manually using the framework profile guide.
Capture a screen you have already verified
polyglot screenshot --languages fr,de --urls /,/settings --reportScreenshot reports help compare appearance. They do not exercise events, certify locale activation, or replace the runtime checklist.