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.

We’ve released a minor change to how we display preprocessor errors. I thought we’d explain it here, since we’ve been documenting the evolution of this particular feature over time and it’s rather interesting to see UI evolve over time based on feedback and usage.

When you have an error in your preprocessor code (any of them), you’ll see the error icon fixed to the lower right of that editor. Like this:


This is slightly different than it was before. We used to display that icon only on the line that actually caused the error. That was pretty good, and a big improvement from the past, but in order to ensure that you saw it and didn’t get confused about why, for instance, the live preview wasn’t updating, we needed to jump the editor to a position so that you could see the error.

Jumping the editor was problematic. It was abrupt, unexpected, and not always super obvious why it was happening. Worse, some users said that they didn’t always necessarily care about the error, they just wanted to continue working where they were and they would handle the error later – but the jumping made that nearly impossible.

So now we can solve both issues: make sure it is obvious the code contains an error, and prevent awkward editor-jumping. The fixed-position error icon does that.

Click that icon, and you’ll jump to the line with the error and explanation. Otherwise, scroll around and you’ll still see the line with the error highlighted.


Thank you for your feedback on this any everything else. It helps guide CodePen to a better place.