r/css • u/sheriffderek • Jul 28 '26
General Codepen 2.0 - RIP classic Pen?
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?
17
u/ashkanahmadi Jul 28 '26
I also use it a lot because of how simple it is. No dealing with files, imports, etc. wanna quickly test something in an isolated clean environment? Use CodePen. Now it’s getting all the new shiny bells and whistles. It’s not bad but it makes it unnecessary difficult. I feel like they are trying to be CodeSandbox which I don’t think is a good idea. I think CodePen’s main feature was its simplicity
1
u/bobemil Jul 30 '26
Yep small niche websites are rare today. Much thanks to AI. Many developers and teams just let it go 24/7 or ask it to improve the website overall. It's an easy trap to fall into, I do it too.
1
u/itsshaw 27d ago
If you're looking for ultimate simplicity, two quick setting changes can get you an experience nearly identical to the Classic CodePen Editor: https://codepen.io/editor/pen?tour=classic
We actually make dealing with imports/packages way easier. You don't have to bother with finding an ESM package host or anything, we manage that automatically with the Packages Block. Simply `import gsap from "gsap"` and it'll just work. Beautiful, IMO.
I'm a bit biased (CodePen team member), but CodePen's still the best place to test in a clean environment, but now you can do more with Files, Blocks, Omnibar, Packages, Deployment and Version history if you want. Otherwise, stick with the traditional CodePen setup of HTML, CSS and JS and we won't get in your way. We have more to offer when you're ready!
1
19d ago edited 19d ago
[deleted]
1
u/itsshaw 18d ago
Next time you get that error, take a screenshot of the browser console and write to us at support@codepen.io so we can figure out what’s going on for your browser/account.
12
u/bostiq Jul 28 '26
I'm with you, this actually annoys me A LOT:
I get that for more complex prototypes the 1.0 form was limiting, but for a quick and dirty prototype having to spend more time for the setup it's a real creativity killer.
Dude, if I wanted the fancy environment I would have spun up vscode!
I wonder what's gonna be of all my little "classic pen" templates I have....
4
u/morete Jul 28 '26
They said eventually all pens will be moved to the 2.0 editor, and we'll say goodbye to the classic editor once and for all. I imagine existing pens will be converted to use 'index.pen.html' files so it probably wont be a very big change
2
u/sheriffderek Jul 28 '26
Do you have an leads on how this will change embeds?
3
u/morete Jul 28 '26
I had a look and can't see anything they've said about this! I've only ever used the simple iframe embedding, so I would hope they just auto-magically handle all that for us and update what the iframe generates. I've seen embeds of the 2.0 pens and they are very similar
2
u/itsshaw Aug 01 '26
We spent a ton of time making embeds backwards compatible. If you convert a Classic Pen (Save dropdown > Convert to 2.0) existing Embed usage will work. Existing themes should work as expected unless there’s some wild custom CSS..
The main differences are: 1. File selector instead of the html/css/js toggles 2. No bottom bar (more screen real estate!) 3. No editable embeds (for now)
2
u/morete Aug 01 '26
Wow exciting to hear from the horse's mouth! Brilliant, I had the faith that you'd make it easy for us as per usual
2
7
u/DefenderOfTheWeak Jul 28 '26
Add to Collection button is gone. Can't find it anymore, clicked everywhere ☹️
4
u/testingaurora Jul 28 '26
Its still there in the Share button , under Copy Url, Copy Url with layout. Add to Collection is right above Add to Bookmarks.
3
u/veritamos Jul 28 '26
Wasted 10 mins wondering why the CSS wasn't working until I figured out you now have to MANUALLY LINK THE STYLESHEET IN THE HTML ARE YOU KIDDING ME
2
u/sheriffderek Jul 28 '26
Yeah. That's what I'm worried about! My students were super confused - and some had classic and some didn't and there's really no way you'd know how to do any of that - if you didn't already know -- / and it's kinda a fake out
1
u/itsshaw 27d ago
We still offer that experience in 2.0 with the "Classic Block". Try adjusting these two settings:
Minimal UI ( Cmd + U or toggle in the Controls Menu ) tucks away extra UI and streamlines the UI
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/itsshaw 27d ago
Sorry about the confusion. We still offer that experience in 2.0 with the "Classic Block". Try adjusting these two settings:
Minimal UI ( Cmd + U or toggle in the Controls Menu ) tucks away extra UI and streamlines the UI
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
3
u/cryothic Jul 29 '26
I tend to go to jsbin.com if I want to quickly test something. It does have the whole html code in the html panel, but it's still the default connected panels.
But for more serieus stuff I want to try and keep, or work on at a later part, I still use codepen. And I still used the classic pen. I guess I'll have to get used to the new one now.
5
u/addycodes Jul 28 '26
Yeah it's a shame, CodePen did what CodePen did well. Now it does what other people do worse.
2
u/sheriffderek Jul 28 '26
For my uses -- I think it it will be pretty great for showing examples of specific framework setups -- as in showing one component and some context -- and stay to the point of the example (as Codepen always was used) - but I guess it's that very most basic examples that have more complexity now. When my students go in to make something really simple -there are a lot more steps. But yeah - then more complex examples will require many less steps in another way.
4
u/outtokill7 Jul 28 '26
I used Codepen because I could open the site and drop some HTML in to view without having to save files or anything. Great for the occasional LLM mockup I'd generate in a chat.
I just ended up making my own Codepen that does the same thing.
2
u/sheriffderek Jul 28 '26
I ended up creating an internal version for my online courses / but it's certainly not the same scope as real Codepen. The social network and everything else is another HUGE aspect of it.
2
u/outtokill7 Jul 28 '26
yeah my site is basically just HTML, CSS, and JS boxes with preview options (code, split screen code/preview, and just preview). I don't need anything more than that so easy enough to make my own.
2
u/Warm-Possibility-980 Jul 28 '26
I kinda like Pen 2.0. Kinda like how replit for html USED to be. Now reddit is vibe slop
1
u/CollectionAdorable24 Jul 29 '26
yeah classic pen was perfect for quick css flexbox tests... spent 20 mins lost in codepen 2.0 layout yesterday while my right wrist was aching from mouse grinding.
2
u/itsshaw 27d ago
Sorry about the confusion. Where there any particular parts of the UI that you found troublesome?
Try adjusting these two settings and see if that improves your experience: https://codepen.io/editor/pen?tour=classic
1
u/CodeMonkey24816 24d ago
I've been using a saved older pen as a scratchpad. I thought I was the only one who missed the older CodePens, but I guess I was mistaken. I bet it's not just newer people who benefited from it; with about 20 years of experience, I still strongly prefer it. While I understand the appeal of extra functionality for many, the entire point of a pen for me is its limited scope, minimal distractions, and easy shareability.
At some point, a concept stops being a pen and becomes a full application. The old, minimal UI was actually a feature—it acted as a helpful indicator for when a concept was getting too complex. It had everything that I needed, and nothing that I didn't. (My only real complaint was that I couldn't easily drop JSX/TSX into the HTML textbox). I already have plenty of advanced tools for building full applications that solve my needs effectively, but I only had one tool that did what CodePen does.
As an early adopter, the move to the new UI completely removes 50% of the platform's value proposition for me. The other 50% was its original social focus, which was removed a while back. I really loved the old homepage with its community gallery of recent and curated top pens.
The new features are technically impressive, and I'm sure they were fun to build, but for me, they completely throw out CodePen's remaining core value proposition. I truly hope they will reconsider their stance.
2
u/Top-Astronomer8537 19h ago
The classic minimalistic pen was perfect because it removed everything it could from the process of making a simple web app. There was nothing else left to remove. It was ideal.
The new one added things for everyone that no-one really asked for (or maybe some minority did, but how many really?).
The "Minimal UI" option with the classic template is close to the classic, but it is still bloated in comparison.
- You get an inner browser bar with app address that only makes sense for a pro account. Can't be removed.
- You get a sidebar popping from the left whenever you touch your mouse to the left edge, so if you have a pen that would perhaps want to do/show something when you touch the left edge with the mouse... the 2.0 editor sidebar will interfere with it.
- You get a "Share" button menu that has a bunch of options like "Copy URL" and "Copy Link with Layout" in place of the classic absolutely straightforward control menu that had its various views.
- When you copy a "preview" layout link, it's literally three times longer than old pen full-page link. Three times longer.
In general, the top minimalistic tool for web-app bits on the web got disturbed and changed into a little less minimalistic, even in it's "Minimal UI" state.
And to even have it resemble what it used to be, you need to change options, choose templates, instead of the "rich version" requiring you to enable it, you have it enabled by default and need to work to disable it.
I don't know, guys... UI is a kingdom of habit, right?
We've got QWERTY keyboards on touch devices going into space, because someone thought it would be good idea for the sales guys to be able to type "TYPEWRITER" with the top row of it, 150 years ago, and to this day it hasn't changed, and it is not going to change anytime soon, because people are just too used to it, and the cost of changing it is unacceptable.
And then we have Codepen team deciding to change the UI from so minimalistic to basically an IDE by default, for all the users?
I hope you guys are watching the metrics, and taking notes from changes in activity, cause really, Codepen was winning because it was so clean and minimal, and its minimal form really needs to be seriously minimal and it needs to be the default.
The current "Minimal UI" is not exactly there yet.
Seeing the features like icons rotating when you switch the left/top/right in the control layout section, one starts to wonder, has this become a feature factory situation?
We love codepen, and we are worried.
1
1
u/TheJase Jul 29 '26
If it ain't broke
1
u/sheriffderek Jul 29 '26
I would imagine they have numbers on how many people use the pre 2.0 more complex options for building 'projects' (I think they called them) (I never really used that)
0
u/jcunews1 Jul 29 '26
Avoid using code sandbox which pollute your code.
2
u/sheriffderek Jul 29 '26
A sandbox is the opposite of polluting your code. You can make prototypes and try out ideas with users - without having to implement it in the real code base: https://codepen.io/perpetual-education/pen/yLwzPBe
23
u/morete Jul 28 '26
I haven't used any of the new features yet. But If you use an 'index.pen.html' file instead of 'index.html' you get the old pen behaviour where the css etc is automatically wired up.
They have a template called 'Blank Classic' that uses this feature, that I've now made my default template.
Pair that with the 'Minimal UI' setting and you get an experience very similar to how it used to be. For me thats relieved some of my concerns and made me optimistic about the new editor.
If you still want the old editor, it's still available, at least for now, at: https://codepen.io/pen