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.
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 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
No problem! There is a setting for that on each Pen in Settings > Behavior:
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”, then press the green “Save All Settings” button to save your preference.