Prompt Editor UIPro
A prompt template editor with {{variables}} highlighted as you type, a rendered preview, and a line diff against the previous version.
The implementation stays private
This public build contains the product description, API shape and production guidance, but not a second copy of the paid component. Pro members can inspect, copy and install the complete source below.
Component source
Single-file React + Tailwind component, no dependencies. Included with Pro — the source and its install command unlock together.
271 lines of source, included with Pro
The preview above is the real component. Pro unlocks its source, the shadcn install command, and every other Pro item — $49 once.
When to use it
- Pass the list of variables your deployment actually fills. It is what turns a typo'd {{name}} from a silent hole in the output into an amber highlight with a warning line.
- Fill the preview with realistic sample values, not lorem ipsum — a preview that reads like the real prompt is the one reviewers actually check before saving.
- Use `renderTemplate` for the substitution at send time too, so the preview and the request can never disagree about how a variable resolves.
- Pass `compareWith` when editing a versioned prompt. The diff is the answer to the only question a reviewer has: what did this change actually do.
- Give the editor room. A system prompt is the longest text in the product, and a three-line box invites the kind of edit that never gets reviewed.
What breaks in production
- Highlighting with a rich-text editor. A contentEditable with inline spans fights the browser's own editing behavior; the transparent-textarea-over-pre split keeps the browser's textarea and adds color underneath it.
- Letting the two layers' typography drift. Font, size, line height, padding and wrapping must match exactly — the shared class constant in the source is load-bearing, not tidiness.
- Forgetting scroll sync. The textarea scrolls and the pre does not, so without mirroring scrollTop the highlights stay behind while the text moves.
- Substituting unknown variables with an empty string. '{{naem}}' in the output is a visible mistake; a gap where a name should be is an invisible one that ships.
- Diffing prompts by eye in a PR. Two long strings in a code review hide a one-word change; compareWith puts the changed lines under the editor where the edit happens.
Related Components
The message input at the heart of an AI chat app — file attachments, model picker, tool toggles, voice, and a send button that turns into stop.
A chat input that accepts file uploads — attachment chips with upload progress, type icons, and one-click removal.
A chat input with the model picker built in — switch models inline, with badges for what each one can do.
Render an AI reply token by token like ChatGPT's typing effect — blinking cursor, stop button, and no layout jump as the text grows.