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, 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. Future work you do on the Pen will be automatically saved.

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

If you're used to the Pre-Autosave days...

We didn't always have Autosave on CodePen. For those of you that are used to the pre-Autosave days, here's some stuff to know.

  • We used to persist Pen data to localStorage. The idea was to prevent lost work in a browser crash or the like. If the page re-opened with data in localStorage, we would replace the editor code with the data there. This was ultimately problematic because it was harder to abort changes you didn't want to keep. It also could get you into confusing situations where code in one browser is different than another and it wasn't clear why. Thankfully, localStorage is not used like this anymore.

  • One worry we've heard voiced about Autosave is that it might be saving work that you don't want others to see yet. That's why we went with the save-to-enable system, where it doesn't start Autosaving until you've saved once. We also attempt to visually remind you of unsaved work more aggressively if Autosave is off.

One way to make absolutely sure nobody is seeing your original Pen in a weird state would be to fork it, work on the fork, then move the changes back. Or if you're PRO, take the Pen private for a bit.