Editor Workflows
Suggested Edits
One focused inline revision replaces a vague phrase with an exact result, then demonstrates both accept and reject outcomes with large controls.
csslight complexitysubtle motionclickmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Writing assistants, approval tools, copy review and AI editing flows that need a compact track-changes decision component.
When not to
A real diff engine, authorship history, multi-line comparison or production editing actions are required.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Replace the original, proposed, accepted and rejected sentences together. Keep the line-through and underline cues plus both decision controls; re-theme through --pro-* tokens.
Safe to edit
- theme tokens (:root --pro-* values)
- original, proposed and outcome sentences
- accept/reject labels and SVG strokes
- decision dwell times in next()
Keep intact
- :root --pro-* token block (shared professional theming API)
- line-through removal and underline insertion cues (meaning cannot rely on color alone)
- role=button, tabindex and descriptive aria-label on .sge-stage
- IIFE wrapper, reduced-motion accepted state, visibilitychange pause and theme hook
- unique sge- class namespace
Known limitations
- The decision cycle is illustrative and does not persist changes
- One inline replacement is supported rather than arbitrary document diffs
- Light re-theme uses the --pro-* block; catalog bg/accent describe the dark default
More Editor Workflows components
- Markdown SplitA focused Markdown control flips between readable source and rendered preview, with one large two-state selector designed to stay legible inside a 300px…
- Comment ComposerA single reply control types a useful comment, presses its send action and resolves to a clear sent state without shrinking into a miniature discussion…
- Mention PickerA compact mention field types @ma, reveals one large teammate result, highlights it and resolves into a clear @maya token sized for the public canvas.
- Autosave DraftOne document-status control moves from edited to saving to saved, morphing a neutral dot into a spinner and confirmation mark at clear 300px-tile scale.
- Focus WritingA compact focus-mode control turns on, then moves a crisp reading spotlight across three short lines while surrounding copy recedes.