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

# Rewriter Wireframe Variables

> Template variables exposed by the Rewriter wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

<Note>
  New to wireframes? Start with [UI Customization Concepts](/ui-customization/overview) and the [Template Variables](/ui-customization/template-variables) overview.
</Note>

## Overview

The **AI Rewriter** feature places text-rewriting suggestions on a target text range with AI-generated rewrite options the user can pick from. Variables below are available inside any `<velt-rewriter-...-wireframe>` tag via three forms:

| You want to…              | Use                         | Example                                                |
| ------------------------- | --------------------------- | ------------------------------------------------------ |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="componentConfig.options.length" />` |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{componentConfig.loading}"`                  |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'is-loading': {componentConfig.loading}"` |

<Note>
  This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.<path>` form. Each primitive carries its own `componentConfigSignal` — the text portal, the dialog, and the bottom-sheet expose different variable sets (documented separately below).
</Note>

## Component Config — Rewriter Text Portal

State on the `<velt-rewriter-text-portal>` inline highlight that sits over the rewriter's target text.

| Variable                                | Type                                                                             | Description                            | Example                                                                 |
| --------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------- | ----------------------------------------------------------------------- |
| `componentConfig.rewriterPinAnnotation` | [`RewriterAnnotation`](/api-reference/sdk/models/data-models#rewriterannotation) | The annotation this portal represents. | `<velt-data field="componentConfig.rewriterPinAnnotation.from.name" />` |
| `componentConfig.first`                 | `boolean`                                                                        | Annotation is the first in a stack.    | `velt-class="'is-first': {componentConfig.first}"`                      |
| `componentConfig.last`                  | `boolean`                                                                        | Annotation is the last in a stack.     | `velt-class="'is-last': {componentConfig.last}"`                        |
| `componentConfig.isPhone`               | `boolean`                                                                        | Mobile layout flag.                    | `velt-class="'is-phone': {componentConfig.isPhone}"`                    |

## Component Config — Rewriter Dialog / Bottom Sheet

State shared between `<velt-rewriter-dialog>` and `<velt-rewriter-bottom-sheet>` (same data, different presentation).

| Variable                              | Type       | Description                                     | Example                                                                      |
| ------------------------------------- | ---------- | ----------------------------------------------- | ---------------------------------------------------------------------------- |
| `componentConfig.searchCount`         | `number`   | Number of generation requests submitted so far. | `<velt-data field="componentConfig.searchCount" />`                          |
| `componentConfig.loading`             | `boolean`  | Generating new options.                         | `velt-class="'is-loading': {componentConfig.loading}"`                       |
| `componentConfig.bottomSheetMode`     | `boolean`  | Renders as a bottom sheet (mobile).             | `velt-class="'bottom-sheet': {componentConfig.bottomSheetMode}"`             |
| `componentConfig.apiCalled`           | `boolean`  | An AI generation call has been made.            | `velt-if="{componentConfig.apiCalled}"`                                      |
| `componentConfig.options`             | `string[]` | AI-generated rewrite options.                   | `<velt-data field="componentConfig.options.length" />`                       |
| `componentConfig.selectedOptionIndex` | `number`   | Currently-selected option (`-1` when none).     | `velt-class="'option-{componentConfig.selectedOptionIndex}-selected': true"` |

## Type Reference

Types referenced by the variables above:

| Type                                                                             | Description                                                     |
| -------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| [`RewriterAnnotation`](/api-reference/sdk/models/data-models#rewriterannotation) | The rewriter annotation — `from`, `targetText`, `options`, etc. |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `rewriters-container`

The per-document orchestrator. Renders one rewriter portal per active rewriter annotation.

* **Public element:** `<velt-rewriters-container>`
* **Wireframe tag:** `<velt-rewriters-container-wireframe>`

| Property        | Value                        |
| --------------- | ---------------------------- |
| Extra variables | None at the container level. |

***

### `rewriter-text-portal`

The inline highlight that sits over the rewriter's target text.

* **Public element:** `<velt-rewriter-text-portal>`
* **Wireframe tag:** `<velt-rewriter-text-portal-wireframe>`

| Property        | Value                                                                                  |
| --------------- | -------------------------------------------------------------------------------------- |
| Extra variables | See [Component Config — Rewriter Text Portal](#component-config-rewriter-text-portal). |

***

### `rewriter-dialog`

The desktop popover with rewrite options.

* **Public element:** `<velt-rewriter-dialog>`
* **Wireframe tag:** `<velt-rewriter-dialog-wireframe>`

| Property        | Value                                                                                                    |
| --------------- | -------------------------------------------------------------------------------------------------------- |
| Extra variables | See [Component Config — Rewriter Dialog / Bottom Sheet](#component-config-rewriter-dialog-bottom-sheet). |

***

### `rewriter-bottom-sheet`

The mobile bottom-sheet variant — same data as `rewriter-dialog`, mobile UX.

* **Public element:** `<velt-rewriter-bottom-sheet>`
* **Wireframe tag:** `<velt-rewriter-bottom-sheet-wireframe>`

| Property        | Value                                                    |
| --------------- | -------------------------------------------------------- |
| Extra variables | Same as `rewriter-dialog`.                               |
| `shouldShow`    | Renders when `componentConfig.bottomSheetMode === true`. |

## Related

* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.