> ## Documentation Index
> Fetch the complete documentation index at: https://developers.phrase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Live Preview

> Add live preview support so translators can see localized content in context.

Live preview helps translators understand context by rendering a visual representation of content in the editor.

## When to use live preview

Use live preview when text meaning depends on layout, styling, or surrounding content.

Typical cases:

* CMS pages with rich formatting.
* Product or marketing pages with embedded UI copy.
* Content with many short strings where context is critical.

## Prerequisites

* A working plugin flow for project/job creation.
* Your tenant-specific TMS API base URL (for example `${TMS_BASE_URL}`).
* Access to source assets needed for preview rendering.
* A strategy for keeping preview assets aligned with source content.

```bash theme={null}
TMS_BASE_URL="https://<your-tms-host>/web"
```

## Option A: HTML file localization

If your source can be represented as HTML, upload HTML directly as the translatable file.

Pros:

* Simplest setup.
* Immediate visual context.

Limitations:

* Not always feasible for CMS models with complex field structures.
* May require custom conversion logic from source model to HTML.

## Option B: Preview package via API

If HTML-as-source is not feasible, upload a preview package and reference it during job creation.

1. Build a ZIP package with one HTML entry point plus relative assets.
2. Upload package: `POST /api2/v1/projects/{projectUid}/jobPreviewPackage`
3. Use the returned preview file UID in job creation metadata (`jobPreviewPackageFileUidRef` in Memsource header).

```bash theme={null}
curl --request POST "${TMS_BASE_URL}/api2/v1/projects/${PROJECT_UID}/jobPreviewPackage" \
  --header "Authorization: Bearer ${ACCESS_TOKEN}" \
  --form "file=@preview-package.zip"
```

Reference:

* [Upload job preview package](/en/api/tms/latest/project/upload-job-preview-package)
* [Create job](/en/api/tms/latest/job/create-job)

## Failure modes and safeguards

* Malformed package structure: validate ZIP before upload.
* Missing assets or incorrect relative paths: run package integrity checks in CI.
* Oversized package: enforce package size limits during build.
* Preview mismatch after source updates: re-generate preview package when content schema changes.

<Tip>Keep preview generation deterministic and versioned. It makes regression debugging much faster.</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Full Integration Workflow" icon="list-checks" href="/en/guides/build-a-tms-plugin/full-integration-workflow">
    Return to the production workflow and integrate preview where needed.
  </Card>

  <Card title="Error Handling & Limits" icon="shield-alert" href="/en/guides/build-a-tms-plugin/error-handling-and-limits">
    Validate limits and failure handling for preview flows.
  </Card>
</CardGroup>