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.

It was sometimes a surprise, and often not a pleasant one, when newly PRO members found out that the layout of the editor for Collab Mode and Professor Mode was different than the normal editor layout. No more! We’ve ditched that tabbed editor and moved everything back to the consistent (and we think better) normal editor.


As a quick backstory, the reason we originally created the tabbed editor was because we wanted to incorporate a realtime chat feature. We put it on the upper right of the page as an omnipresent bit of UI. Feedback over time taught us that people liked the Chat feature, they just wished (sometimes assumed) they could minimize it. So to accommodate that, we’ve moved the Chat down into a “tab” along the footer. With that out of the way, we could make the rest of the screen just like the regular editor, with it’s (much more robust) set of layout customization features.

In Collab Mode, we think using the regular editor is better because individual collaborators can minimize/maximize each individual editor as needed. Or, leave them all open and have it be easier to see where/what other collaborators are doing.

In Professor Mode, we sync the minimization/maximization of editors to help focus students attention to specific places.

And of course Chat is still there. Even while minimized, it will let you know of new messages that you haven’t seen yet through a slow-pulsing gradient highlight.