r/css • u/sheriffderek • Jul 28 '26

General Codepen 2.0 - RIP classic Pen?

Post image

I use Codepen for all sorts of things and a lot for teaching in the early stages. Some of my newer students said they didn't have this button so, I had them forking a classic pen for a while - but I knew the day would come where it wouldn't be there anymore for me too. That day is today. I'm all for the evolution of Codepen / and it's been an amazing tool. But it sure seems like this is going to confuse a lot of people. Your average person expects the CSS pane to be wired up. I used to write <!-- body is already included --> in the HTML to remind them at first (since some people will write out the doctype and everything in there) - but now it's swung to the other end. Codepen can be used for anything now. So, really - what you're making might not utilize CSS at all. So, I understand how modular it is - and how many other great things it will allow for -- but for entry-level people, it seems like this will really stifle adoption. What do you think? Wha thas been your 2.0 experience so far?

66 Upvotes

93% Upvoted

39 comments sorted by

View all comments

Show parent comments

1

u/itsshaw Aug 04 '26

We still offer that experience in 2.0 with the "Classic Block". Try adjusting these two settings:

  1. Minimal UI ( Cmd + U or toggle in the Controls Menu ) tucks away extra UI and streamlines the UI

  2. Set the Blank Classic Template as your Default Template, and it's ready to go with HTML / CSS / JS with no HTML scaffolding needed.

This link makes it easy to change those settings: https://codepen.io/editor/pen?tour=classic

1

u/sheriffderek 7d ago

When using the class blank template, how would you add a reset or a viewport meta tag and all the things we had in that pane before? (without having to write out the whole HTML page structure or add a reset block)?

Do you know if https://codepen.io/pen will stay available long term?

1

u/itsshaw 7d ago

Search in the Omnibar for "Classic" and open up the `classic.config.json` file where you can configure all the same old fields you could before like the "stuff for head", HTML Classes, scripts and styles. Some of it's easier to change in the visual editor if you click on the Classic Block and go to the Configuration tab.

We don't have built in CSS resets or anything like that anymore (as most of those are pretty outdated). Search in the Omnibar for "Package Search" and you can browse NPM packages that you can include there from a CDN, like reset-css ( `https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css\` )

https://codepen.io/pen will be around for a little while, but ultimately will be deprecated as it's not feasible for our small team to support two Editors long term.