webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Cascading Select

Fuse.js Typo-Tolerant Product Search with Threshold Tuning

Bootstrap Paste-to-Upload (Clipboard Image Paste)

Bootstrap Multi-File Upload Queue

Avatar Upload

Chip Filter

Form Autosave Indicator — Debounced Save Status UI

Form Autosave Indicator · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsCSS AnimationForms & Validation

Copy & paste

Source Code

<div class="fai-card">
  <div class="fai-head">
    <h3>Document settings</h3>
    <span class="fai-status" id="faiStatus">
      <span class="fai-status-icon" id="faiStatusIcon"></span>
      <span id="faiStatusText">All changes saved</span>
    </span>
  </div>

  <div class="fai-field">
    <label for="faiTitle">Title</label>
    <input type="text" id="faiTitle" value="Q3 Marketing Plan">
  </div>
  <div class="fai-field">
    <label for="faiDesc">Description</label>
    <textarea id="faiDesc" rows="4">Draft outline for the Q3 campaign, channels, and budget allocation.</textarea>
  </div>
  <div class="fai-field">
    <label for="faiOwner">Owner</label>
    <input type="text" id="faiOwner" value="Jordan Lee">
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

True debounced saving
A save only fires 900ms after typing stops, not on every keystroke, while the "Unsaved changes" label appears instantly.
Four distinct visual states
Idle, saving, saved, and error each have their own color and icon treatment via one shared status-setting function.
Spinning indicator while in flight
A CSS-animated ring shows specifically that a save is in progress, not just "not yet saved."
Honest error-and-retry path
A failed save shows a red retry message and automatically attempts again, rather than only ever showing success.
Leave-page guard tied to real state
The beforeunload warning only triggers while changes are actually unsaved or saving — never after a confirmed save.
One function drives every status change
setStatus(state, text) keeps the icon, color, and label always in sync with no risk of a mismatched state.
Per-field debounce sharing one timer
Editing any of multiple fields resets the same single save timer, so a multi-field edit triggers one save, not several.
No visible Save button needed
The entire pattern is built around autosave from the first interaction — no separate manual-save affordance competing for attention.

About this UI Snippet

Form Autosave Indicator — Debounced Save, Error Retry & Leave-Page Guard

Screenshot of the Form Autosave Indicator snippet rendered live

Notion, Google Docs, and every modern editor share the same small but trust-critical UI element: a status line that goes "Unsaved changes" → "Saving…" → "All changes saved" without the user ever pressing a Save button. This snippet builds that exact indicator with a real debounce, a simulated network call, an error-and-retry path, and a guard against closing the tab mid-save.

Debounce, not save-on-every-keystroke

Every input fires scheduleSave(), which immediately marks the status "Unsaved changes" and clears any pending save timer before starting a fresh one — so a save only actually fires 900ms after typing *stops*, not after every character. This is the same debounce pattern used for search-as-you-type, applied here to avoid hammering a save endpoint on every keystroke while still feeling instant from the user's perspective, since the "Unsaved changes" state appears immediately even though the real save is delayed.

Four distinct states, not just on/off

The indicator cycles through idle ("Unsaved changes," gray dot), saving (a spinning ring, indigo), saved (solid green dot), and error (red dot with a retry message) — each with its own color and icon treatment via one shared setStatus(state, text) function that swaps a single class plus the label text. Four states matter because a binary "saved/unsaved" indicator can't communicate that a save is currently *in flight*, which is exactly the moment a user is most likely to worry about losing their edit if they navigate away.

A real (simulated) failure path

performSave() includes a failNext flag the demo flips to show what an actual failed save looks like: the status turns red with "Couldn't save — retrying…" and automatically schedules another save attempt 1.2 seconds later. An autosave indicator that can only ever show success is dishonest about how real networks behave — showing the retry state, even briefly, builds correct trust that the app is actually handling failures rather than silently swallowing them.

Guarding against losing in-flight edits

A beforeunload listener checks whether the status is currently idle (unsaved) or saving (in flight, not yet confirmed) and, if so, asks the browser to show its native "leave site?" confirmation. Once a save resolves to saved, the guard is inert — so the warning only appears when it's actually protecting against real data loss, never as a blanket "are you sure?" on every navigation.

Why debounce beats both extremes

Saving on every keystroke wastes requests and can hammer a backend during fast typing; saving only on blur or a manual button risks losing work if the user closes the tab mid-edit without ever blurring the field. A short debounce — long enough to skip mid-word saves, short enough that "unsaved" never lingers for more than about a second after typing stops — is the practical middle ground every major editor converges on, and it's the one thing this pattern can't skip without reintroducing one of those two failure modes.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA document settings card renders with three fields and a "All changes saved" status in the header.
  2. 2
    Edit any fieldThe status immediately switches to "Unsaved changes," then to a spinning "Saving…" about a second after you stop typing.
  3. 3
    Watch it resolveAfter the simulated request completes, the status returns to a green "All changes saved."
  4. 4
    Trigger the error pathSet failNext = true in the console before editing a field to see the red "Couldn't save — retrying…" state and its automatic retry.
  5. 5
    Try closing the tab mid-editWith unsaved or in-flight changes, the browser's native "leave site?" confirmation appears; once saved, it won't.
  6. 6
    Connect a real save endpointReplace the setTimeout in performSave() with a fetch PATCH/PUT call, resolving to 'saved' on success and 'error' on failure.

Real-world uses

Common Use Cases

Document and note-taking apps
The exact "All changes saved" pattern from Notion, Google Docs, and similar editors.
CMS and content editing tools
Reassure editors that draft changes are persisted automatically while they write.
Settings and configuration panels
Replace a traditional Save button with autosave plus status feedback for account or project settings.
Form builders and no-code tools
Show autosave status while a user configures a form or workflow without an explicit save step.
Collaborative editing apps
Pair with multiplayer cursors to show both live collaboration and persistence status together.
Learning debounce and state-machine patterns
A clear, minimal reference for a four-state status indicator driven by a single setStatus() function.
Related: Natural Language Date Input — Type
See the Natural Language Date Input — Type for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Replace the setTimeout block inside performSave() with a fetch PATCH or PUT request carrying the current field values; call setStatus('saved', 'All changes saved') in the .then() on success, and the existing error-retry block in the .catch() on failure.

Capture a snapshot of the form's values when a save completes, and in scheduleSave() compare the current values against that snapshot before starting the debounce timer — skip scheduling a save entirely if nothing differs (e.g. the user typed then undid their change).

Store a timestamp when a save resolves, and run a separate interval (every 15–30 seconds) that recomputes a relative time string ("2 minutes ago") and updates the status text, without touching the save logic itself.

Use a separate timer per field id instead of one shared saveTimer, keyed in an object, with each field able to specify its own delay before triggering an individual save call for just that field's data.

In React, keep status in useState and the debounce timer in a useRef, clearing it on unmount inside a useEffect cleanup; in Vue, use ref() with onUnmounted; in Angular, use a component field with ngOnDestroy for the same cleanup. The four-state model and beforeunload guard logic port directly into each framework's lifecycle hooks.