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:
Now clicking the Run button (or Com/Ctrl-Shift-5) 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.