∞ forever components

Editor Workflows

Autosave Draft

One 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.

csslight complexitysubtle 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

Document editors, CMS products, settings forms and note tools that need a compact autosave-status microinteraction.

When not to

Revision history, conflict handling, offline recovery or actual persistence controls must be shown.

Working with an AI agent

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

Change the filename and three status labels, then adjust the edited/saving/saved waits in next(). Preserve the icon morph and single-row status shape; re-theme through --pro-* tokens.

Safe to edit

  • theme tokens (:root --pro-* values)
  • filename and three status labels
  • file, spinner and check SVG styling
  • edited/saving/saved timing in next()

Keep intact

  • :root --pro-* token block (shared professional theming API)
  • role=button, tabindex and descriptive aria-label on .asd-stage
  • IIFE wrapper, reduced-motion saved state and visibilitychange pause
  • unique asd- class namespace and theme hook

Known limitations

  • Save state is illustrative and has no storage layer
  • Only successful saving is modeled; production use needs offline, retry and conflict states
  • Light re-theme uses the --pro-* block; catalog bg/accent describe the dark default

autosavedraftrevision-historyeditorsaving-statecontentproduct-uistatus

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.
  • 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.