> ## 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](/docs/ui-customization/overview) and the [Template Variables](/docs/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`](/docs/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`](/docs/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](/docs/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.