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.

Let's you know there is an error, but doesn't interrupt your flow.

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:

1) Click the Settings button to open the Settings popup 2) Click the Behavior tab 3) Uncheck the Auto Update Preview checkbox 4) A Run button will appear in the header

Now clicking the Run button (or Com/Ctrl-Shift-7) is the only way to update the preview.

You can also turn off the auto update preview in all of your Pens in your Editor settings. Under "Preprocessor & Library Defaults", uncheck "Auto Update Preview", then save your settings.