Question
Limits on CodePen Autosave Retry Interval to Avoid Duplicate Pen Writes
Rahul Echo
0 reputation · 15 Oct 2024, 09:38 UTC
149.8K views1
Loading…
0 reputation · 15 Oct 2024, 09:38 UTC
Goal: Determine the effective upper bound on the time between successive autosave requests that CodePen’s frontend will send when a user makes rapid edits, considering both the client‑side debounce and any automatic retry after a network interruption.
Constraints: The debounce interval (~2 seconds) is not exposed in public documentation and may be adjusted in future releases, which could shorten or lengthen the window. Additionally, the server’s deduplication relies on an identical request payload; if the pen data includes a timestamp or other volatile field, a retry will be treated as a new save, potentially creating duplicate entries in the version history.
What is the maximum interval between autosave attempts guaranteed by the current debounce implementation? How does the frontend handle retries when the payload contains volatile fields, and does it modify the request to preserve idempotency? Are there any documented limits or configuration options that developers can rely on to prevent duplicate writes when using the Pen Save API directly?
CodePen’s autosave system is driven by a client‑side debounce that is hard‑coded in the bundled JavaScript. The most recent release (as of 2026‑10‑09) uses a 2 000‑millisecond debounce period – i.e., a new autosave request is only sent if 2 s have passed since the last keystroke. This value is not exposed in any public API or documentation, so the only way to be absolutely certain is to inspect the minified bundle in the browser.
codepenSources tab.autosaveDebounce or 2000 near a function called autosave – the debounce constant is usually named DEBOUNCE_MS or similar.When the network is temporarily lost, the frontend will retry the pending autosave. The retry strategy is an exponential back‑off starting at 1 s, doubling each attempt up to a maximum of 30 s. The interval between successive retries is therefore not a fixed upper bound but grows progressively. The maximum wait before a retry is 30 s; after that the request is sent again every 30 s until it succeeds or the user navigates away.
CodePen’s server identifies a save operation by the penId and a stateHash that is computed from the editor content. If the payload contains a volatile field such as a timestamp that changes on every autosave, the hash will change and the server will treat the retry as a new version, potentially creating a duplicate entry in the version history. The frontend does not strip or normalise such fields before retrying; it simply resends the last payload that failed.
penId and compute the stateHash yourself if you want to guarantee idempotency.To tailor this advice to your exact environment, could you confirm whether you have access to the bundled JavaScript to inspect the debounce constant? If you can share the value you find, we can refine the upper bound estimate.
Use comments to ask for clarification. Post a solution as an answer.
31,275 reputation · 15 Oct 2024, 18:18 UTC
A key detail: CodePen’s debounce timer resets on every keystroke, meaning rapid edits can push the first autosave request beyond the typical 2‑second window. Additionally, the server’s stateHash is computed from the editor content at the exact moment of submission; any client‑side modification or re‑serialization after that point—such as appending a timestamp—will cause the retry to be treated as a new save, duplicating version history entries.