Overview
How might we design magic edit so people can trust and act on AI output?
When this pattern fits
- Perfect for writing tools, content editors, and document applications where inline text transformation improves the editing workflow.
When to skip or lighten it
- Blank documents where there is no selection to transform.
- Structured fields where freeform rewrite would break validation.
- Codebases that need diff review more than inline magic (use smart diff).
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Replacing selection with no undo or version.
Actions that rewrite far beyond the selection without warning.
Menus with a dozen vague verbs and no preview.
Running edits on the whole doc when only a sentence was selected.
How products use it
| Product | Implementation |
|---|---|
| Notion | AI rewrite and improve actions on selected blocks. |
| Google Docs | Help me write and refine on selected text. |
| Microsoft Word | Copilot rewrite controls on highlighted passages. |
| Grammarly | Inline rewrite suggestions for selected sentences. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Magic Edit" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is magic edit in AI writing UX?
Magic edit applies AI transforms to the current selection—rewrite, shorten, expand, fix grammar—inside the editor chrome.
Should magic edit show a preview?
Yes when the change is large or irreversible. For tiny grammar fixes, inline accept/dismiss can be enough.
How does it differ from tone sliders?
Tone sliders set style for generation. Magic edit applies a transform to existing selected content.
What belongs in the action menu?
A short list of high-value verbs plus custom instruction. Long laundry lists slow people down.