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

> ## Agent Instructions
> These are Ditto's developer docs. Ditto is a single source of truth for product copy across design, review, localization, and code.
> The first step on any codebase is a scan: https://developer.dittowords.com/get-started/scan-your-repo.md. That page also covers reviewing the style guide Ditto drafts from the scan. After it, the follow-on guides are Connect Figma files and Set up localization (under /guides/) and Connect the Ditto MCP (the Setup page of the MCP reference).
> Two different MCP servers: the Ditto MCP server at https://api.dittowords.com/v2/mcp gives an agent a workspace's text and style guide rules; the documentation MCP server at https://developer.dittowords.com/mcp searches these docs.
> Prefer logging in with a Ditto account (npx -y @dittowords/cli@latest login; OAuth in MCP clients) over API keys. API keys are for CI and headless clients only.
> Commands are complete as written and use npx -y @dittowords/cli@latest; nothing needs a global install.

# Legacy tools

> The legacy CLI mode, the Ditto React SDK, the VS Code extension, and legacy webhook events, with the current tools that replace each one.

These tools predate the current Ditto CLI (`5.x`), the MCP server, and `scan`. They keep working for teams that adopted them, but new integrations should start with [Scan your repo](/get-started/scan-your-repo).

## Legacy CLI mode

Version `5.x` of the Ditto CLI pulls text from the current version of Ditto by default and still supports every `4.x` feature behind the `--legacy` flag. Add the flag to any command that `v4.5.2` supported:

```bash theme={null}
npx @dittowords/cli --legacy pull [options]
npx @dittowords/cli --legacy project
npx @dittowords/cli --legacy component-folders [options]
npx @dittowords/cli --legacy generate-suggestions [options]
npx @dittowords/cli --legacy replace [options]
npx @dittowords/cli --legacy import-components [options]
npx @dittowords/cli --legacy help [command]
```

To use legacy and current features in the same repo, keep two config files and point at the legacy one with `-c`:

```bash theme={null}
npx @dittowords/cli --legacy pull -c ./ditto/legacy-config.yml
```

Full reference: [Legacy CLI installation](/legacy/cli-reference-legacy/authentication), [configuration](/legacy/cli-reference-legacy/configuration), and [files](/legacy/cli-reference-legacy/files). Legacy API endpoints: [Legacy API reference](/legacy/api-reference-legacy/authentication).

## Ditto React SDK

[`ditto-react`](https://www.npmjs.com/package/ditto-react) is a React and React Native library that reads the JSON string files written by the CLI and exposes them through a provider and hooks, with first-class support for variants. It works with all JSON output formats.

Installation and usage are in the package README on npm. Issues go to [dittowords/ditto-react](https://github.com/dittowords/ditto-react/issues). The library's last release was 1.6.3; new React projects can use the CLI's i18next output with `react-i18next` instead, which needs no Ditto-specific runtime dependency.

## Legacy webhook events

These events are *only* available on legacy webhooks, which are connected directly to the legacy component library; if you joined Ditto after March 2025, you probably aren't looking for these.

### Component Creation

Emitted any time a component is created in Ditto.

```tsx theme={null}
{
  "event": "Component_Creation",
  "data": {
		"componentId": "test_component",
		"folderId": "test_folder", // null if not in a folder
		"name": "Test Component",
		"text": "This is a test component.",
		"status": "NONE",
		"notes": "",
		"tags": ["test_tag"]
	}
}
```

### Component Deletion

Emitted any time a component is deleted in Ditto.

```tsx theme={null}
{
  "event": "Component_Deletion",
  "data": {
		"componentId": "test_component",
		"folderId": "test_folder", // null if not in a folder
		"name": "Test Component"
	}
}
```

### Component Text Change

Emitted any time a component’s base text is changed in Ditto. *Does not emit when variant text, plural text, or rich text styling is changed.*

```tsx theme={null}
{
  "event": "Component_TextChange",
  "data": {
		"componentId": "test_component",
		"folderId": "test_folder", // null if not in a folder
		"textBefore": "This is a test component.",
		"textAfter": "This is a test component!"
	}
}
```

### Component Status Change

Emitted any time a component’s status is changed in Ditto.

```tsx theme={null}
{
  "event": "Component_StatusChange",
  "data": {
		"componentId": "test_component",
		"folderId": "test_folder", // null if not in a folder
		"statusBefore": "NONE",
		"statusAfter": "WIP"
	}
}
```

### Component ID Change

Emitted any time a component’s developer ID is changed in Ditto.

```tsx theme={null}
{
  "event": "Component_IdChange",
  "data": {
		"componentIdBefore": "test_component",
		"componentIdAfter": "test_component_1",
		"folderId": "test_folder", // null if not in a folder
	}
}
```

### Test Event

Emitted when sending a test request while creating a webhook.

```tsx theme={null}
{
  "event": "TestEvent",
  "data": {
		"message": "Hello, Ditto!"
	}
}
```