Our goal with Autosave on CodePen is a simple one: we don’t want anybody to lose work. It’s always a heartbreaking tale when you hear of lost effort.

Because most Pens are public, that makes Autosave a little tricky, so let’s explain.

Autosave is enabled after you’ve saved once

When you first open the CodePen editor to create a new Pen or work on an existing one, Autosave is off. We don’t want to force you to save something you might just be playing around with.

After you’ve saved once, Autosave is enabled until you close the Pen.

Autosave is on a timer

In a perfect world, every key you pressed would be saved instantly. Unfortunately, this isn’t possible at the moment. Instead, we trigger a save of your work occasionally. This makes data loss less common, but not impossible.

Even with Autosave on, you can still use the Save button to save your work instantly. This is still your best bet when you want to send the Pen to someone else (or yourself in another browser) and make sure they have the latest version.

We’ll warn you if you’re leaving unsaved work

We’ll pop up a warning if:

  • You attempt to leave a Pen by using your browser buttons or closing the window/tab
  • You attempt to refresh the page with unsaved work

If you leave or refresh the page anyway, your changes will not be saved.

Leaving the page with unsaved work will abort new changes made since your last save. We know sometimes that’s exactly what you want to do, but we warn you to make it harder to lose unsaved work by mistake.

Turning off Autosave

You can turn off autosave on individual Pens from the Behavior tab in Pen Settings. Uncheck the box next to “Autosave” and press the “Save & Close” button below the window to save your setting.

Was this article helpful?