Prompt Editor

Prompt and negative prompt: weights, LoRA, autocomplete, token count. Pro · Image generation › Prompt and settings

Positive + negative prompt with weight highlighting, Ctrl+↑/↓ weights, tag autocomplete and a token counter.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add prompt-editor

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { PromptEditor } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`string`		Positive prompt.
`defaultValue`	`string`	`''`	Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`negativeValue`	`string`		Controlled `negativeValue`; use with `onNegativeValueChange`.
`defaultNegativeValue`	`string`	`''`	Initial `negativeValue` when uncontrolled.
`onNegativeValueChange`	`(value: string) => void`		Called with the new `negativeValue` when it changes.
`negative`	`boolean`	`true`	Show the negative prompt field. Default true.
`tags`	`readonly PromptTag[]`	`[]`	Autocomplete source: tags, LoRA names (`kind: 'lora'`, typed as `<lora:`) and embeddings (`embedding:`).
`loraWeight`	`number`	`1`	Strength written into completed `<lora:name:w>` tags. Default 1.
`history`	`readonly string[]`	`[]`	Previous prompts, most recent first; choosing one replaces the positive prompt.
`onEnhance`	`(prompt: string) => Promise<string>`		Rewrites the prompt (e.g. with an LLM); the editor shows a spinner while the promise is pending.
`onSubmit`	`(value: PromptValue) => void`		Ctrl/Cmd+Enter in either field.
`weightStep`	`number`	`0.1`	Ctrl/Cmd+↑/↓ step for `(text:w)`. Default 0.1.
`networkStep`	`number`	`0.05`	Ctrl/Cmd+↑/↓ step for `<lora:name:w>`. Default 0.05.
`chunkSize`	`number`	`75`	CLIP chunk length. Default 75.
`countTokens`	`(text: string) => number`		Exact tokenizer; the built-in count is a close heuristic.
`size`	`'sm' \| 'md'`	`'md'`	`sm` is dense, e.g. inside a node of a graph editor.
`minRows`	`number`		Visible rows of the positive field before it grows. Default 3 (2 when `sm`).
`maxRows`	`number`	`10`	Rows after which the field scrolls. Default 10.
`hideLabels`	`boolean`	`false`	Keep the field labels for screen readers only.
`showHint`	`boolean`		Show the weight shortcut hint. Default true for `md`.
`disabled`	`boolean`	`false`	Disables both fields, autocomplete, History and Enhance.
`toolbar`	`ReactNode`		Extra controls next to History and Enhance.
`name`	`string`		Form field names.
`negativeName`	`string`		Form field name of the negative prompt.
`autoFocus`	`boolean`		Focus the positive field on mount.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<PromptEditorLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Generation Settings — Model, sampler, steps, CFG, size, presets
Aspect Ratio Picker — Aspect ratio and exact size
Seed Input — Seed: random, fixed, increment
LoRA Stack — LoRA stack: strengths, toggles, order, trigger words
Style Presets — Style cards with previews and weights
Reference Image Input — Reference image for img2img and ControlNet
Generation Progress — Steps, ETA, live latent preview, queue
Image Result Grid — Result gallery with actions and a lightbox
Image Compare — Before/after comparison: slider, side by side, overlay
Inpaint Canvas — Inpainting mask and canvas outpainting
Generation History — Generation history by day, with filters
Image Adjustments — Color grading: upload, fit and seven filter sliders

Previous: Context Budget Meter · Next: Generation Settings · All Image generation