Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Imagine this scenario:

  1. You’re working on a Pen in the Editor
  2. You decide to test it in another browser, so you copy/paste the Editor URL into a second browser
  3. You need to make a change
  4. Because you aren’t logged in the second browser, you make the change in the first browser and save it
  5. You refresh the second browser to see the change
  6. You don’t see the newly updated code. WTF?!

Has that ever happened to you? Well never fear, that WTF moment is fixed.

Why did it do that?

That old bummer-inducing behavior was us trying to be helpful. We maintain the state of the editor in localStorage for you. That’s useful for a number of reasons. Say the browser crashes and you forgot to save. Never fear, when you open the Editor back up, all your code will be there. Or even more likely, say you instinctually hit Command-R to reload the editor without saving. We’ll try and warn you with a popup, but if you make it through that, you still won’t lose your code because we’ve saved it locally for you.

Those things are pretty important we think, so we didn’t want to just ditch them.

How it works now

We still maintain the localStorage, but before we restore from it, we check and see if the Pen has been saved more recently than the localStorage was saved. This required some tricky timing stuff and backend to frontend synchronization. Seems to be working pretty good in our testing though. In the future, we hope to be more aggressive with autosaving. We’ll likely need to maintain a localStorage system though, so this is a good foundation.

Let us know if you see anything whacky.