# General Translation Integrations: Quickstart
URL: https://generaltranslation.com/en-GB/docs/integrations/paraglide/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Record the source code around each Paraglide JS message and send it to translation as context.

`@generaltranslation/paraglide-js` finds every usage of a Paraglide JS message in your app and saves the code around it. A message like 'Order' then reaches translation with the code that shows whether it is a button, a heading, a noun, or a verb.

It reads your source files. It does not change Paraglide JS, and it never runs your bundler, so it works however your app is built.

## Before you start [#before-start]

You need:

* Node.js 20 or later.
* Paraglide JS 1, 2, or 3, compiled at least once so its output directory exists.
* Messages stored in the inlang message format (`plugin.inlang.messageFormat`), such as `messages/en.json`.
* A project that translates those message files with the CLI. (See the [CLI Quickstart](/docs/cli/quickstart)).
* For components that are not JavaScript, TypeScript, or JSX, the framework's language tool installed in your app. (See [Supported file formats](/docs/integrations/paraglide/reference/file-formats)).

## Quickstart [#quickstart]

Install the package, collect the context, then translate as usual.

### 1. Install `@generaltranslation/paraglide-js`

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install --save-dev @generaltranslation/paraglide-js
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/paraglide-js
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/paraglide-js
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/paraglide-js
    ```
  </Tab>
</Tabs>

### 2. Collect the context

Run [`paraglide-context`](/docs/integrations/paraglide/reference/paraglide-context) from your app&#39;s directory. `--verbose` prints how many usages it found and which Paraglide JS output directories it used.

```bash
npx paraglide-context --verbose
```

Each message file of your base locale gets a metadata file next to it. Every used message lists the code around its usages, by source file:

```json title="messages/en.metadata.json"
{
  "greeting": {
    "sourceCode": {
      "src/Header.tsx": [
        {
          "before": "import { m } from './paraglide/messages.js';\n…",
          "target": "  return <h1>{m.greeting({ username })}</h1>;",
          "after": "}\n…"
        }
      ]
    }
  }
}
```

<Callout type="info">
  Warnings name what was skipped and how to fix it: an unresolved import alias, a missing language tool, or a directory that was not recognised as Paraglide JS output. (See [Resolving imports](/docs/integrations/paraglide/guides/resolving-imports)).
</Callout>

### 3. Translate your messages

Run [`gt translate`](/docs/cli/reference/commands/translate). The CLI finds each metadata file next to its message file and sends it with the messages as [keyed metadata](/docs/cli/reference/keyed-metadata).

```bash
npx gt translate
```

To keep the context current, collect it before every translation:

```json title="package.json"
{
  "scripts": {
    "translate": "paraglide-context && gt translate"
  }
}
```

<Callout type="info">
  New context alone does not retranslate a message. A message is translated again when its source text changes.
</Callout>

## Next steps

- /docs/integrations/paraglide/guides/resolving-imports
- /docs/integrations/paraglide/guides/adding-file-formats

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.