∞ forever components

Editor Workflows

Comment Composer

A single reply control types a useful comment, presses its send action and resolves to a clear sent state without shrinking into a miniature discussion screen.

csslight complexitymoderate motionclickmobile-readyaccessible

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Comment bars, inline replies, collaboration tools, issue trackers and product tours that need a compact write/send/success microinteraction.

When not to

A working multiline textarea, attachment controls, backend submission or retry/error handling is required.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the avatar initials, recipient and sample reply, then tune the four state waits. Preserve the single-row composer shape, send/check icon morph and keyboard activation; re-theme through --pro-* tokens.

Safe to edit

  • theme tokens (:root --pro-* values)
  • recipient, avatar initials and reply text
  • send and check SVG stroke styling
  • draft/send/confirmation timing in next()

Keep intact

  • :root --pro-* token block (shared professional theming API)
  • role=button, tabindex and descriptive aria-label on .ccp-stage
  • IIFE wrapper, reduced-motion sent state and visibilitychange pause
  • unique ccp- class namespace and namespaced keyframes
  • theme hook (?theme bootstrap plus forever:theme listener)

Known limitations

  • The reply text and send result are scripted rather than editable or submitted
  • Only success is shown; production use needs failure, retry and disabled states
  • Light re-theme uses the --pro-* block; catalog bg/accent describe the dark default

commentcomposerdiscussionoptimistic-uieditorcollaborationproduct-uifeedback

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…
  • 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.
  • Suggested EditsOne focused inline revision replaces a vague phrase with an exact result, then demonstrates both accept and reject outcomes with large controls.
  • Focus WritingA compact focus-mode control turns on, then moves a crisp reading spotlight across three short lines while surrounding copy recedes.