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.

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

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}"

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).

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	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	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.

---

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.

---

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 — overview of the velt-data / velt-if / velt-class system.