By default, the CodePen editor will automatically update the preview of your code.

It doesn’t update after every single keystroke, but rather when it has sensed a pause in typing. You can quickly get used to the updating rhythm in CodePen and sense when an update to the preview will happen.

Unobtrusive Errors

CodePen tries to be as unobtrusive as possible with the auto updates. For instance, if you are using a preprocessor and there is an error in your code, you will be notified by a small red error icon in the editor, which you can click to reveal the error.

The CodePen editor's JavaScript panel, shown with JavaScript that has a syntax error. A red exclamation point icon is at the lower right of the panel, indicating an error.

The preview will remain as it was until the error is resolved.

  • No abrupt removal of your preview
  • No jumping scroll position of the editor.

Turning Off Auto Updating Previews

There are some circumstances why you might want to turn off the auto updating behavior. Perhaps your Pen immediately launches into an animation and you’re sick of watching it restart over and over. Perhaps you’re using a preprocessor or lots of JavaScript and it takes a moment to process and kick off. You wish you could just press a button to run everything rather than having it happen automatically.

No problem! There is a setting for that on each Pen in Settings > Behavior:

On your Pen Settings menu, select the “Behavior” tab, then slide the “Auto-Updating Preview” toggle to “Off”.

If you would like to disable auto-updating previews on all Pens, you can set this as an account-level preference in your Editor settings. Under “Preprocessor & Library Defaults”, uncheck “Auto Update Preview”.

Was this article helpful?