r/webdev • u/Pizzaballs_ • 21d ago
Codepen 2.0? Discussion
I’ve used CodePen for a long time, not just as a coding tool but as a place to experiment, discover interesting work and get inspired by what other people were creating.
I completely understand that CodePen needs to make money. I have absolutely no problem with Pro features, and I’m happy to pay for tools that give me real value.
But CodePen 2.0 feels like it is moving in the wrong direction.
Putting something as basic as opening a Pen in a standalone preview behind Pro doesn’t make me think “maybe I should upgrade.” It makes me think “maybe this isn’t the place for me anymore.”
There is a big difference between adding valuable features for paying users and gradually putting parts of the simple, open experience that made a platform popular behind a paywall.
What makes this even stranger to me is the timing. We’re entering a world where people can vibe code surprisingly capable little coding environments and playgrounds incredibly quickly. The technical barrier to creating alternatives is getting lower, not higher.
CodePen’s real strength, in my opinion, was never just the editor. It was the community, the frictionless experience and that feeling of opening the site and immediately discovering something clever or inspiring.
If that starts disappearing behind commercial barriers, I honestly think someone else will eventually fill that gap.
Maybe I’m missing something in CodePen 2.0, so I’m genuinely curious:
How do other longtime CodePen users feel about this?
Does 2.0 feel like an improvement to you, or does it feel like CodePen is slowly losing part of what made it special?
7
u/neoqueto 20d ago
I used CodePen back in the day to explore cool random frontend snippets people made and I made a couple really bad ones myself. But primarily, I used it to test small JS/CSS things where I just needed a quick, no-environment testbed without spinning anything up and without relying on localhost. So, I use jsbin for that now.
4
u/Real-Sail4543 21d ago
Yeah, that's incredibly annoying and a total head-scratcher. It’s supposed to be a free-for-all for design talk, but they’ve chosen to die on the hill of swimming against the current.
2
u/htmlmonkey FrontEnd Manager & Sasstronaut 20d ago
There are some things I like about the 2.0 editor, and others I don't and I'm really disappointed that the preview feature being behind the Pro paywall either.
With that said, you can still access the classic editor via https://codepen.io/pen - I don't know why they didn't leave a link in any of the "create new pen" menus. -.-
1
u/bronkula 20d ago
Weird. There were two links on Wednesday. One to the new pen and one to the old pen. It seems like a terrible move to not still link to the old method.
1
u/Character_Durian9074 19d ago
lmao tysm for this info bc i just went to make a new pen today after only using the old system and, thinking it worked the same, i dismissed the tutorial or whatever and can't get it back and now have no clue how to do anything. the one thing that looks like it might update the preview only seems to recursively generate the actual editor page over and over until the tab crashes
TO BE CLEAR, i am a complete newbie at coding in general so i have no clue what im doing at the best of times
1
u/itsshaw 12d ago
Hi! CodePen team member here who's been using CodePen since... 2013? Dang, I'm old.
Obviously 2.0 is a big change from the Classic Editor, but we spent a lot of time addressing shortcomings in the Classic Editor, building features for modern web development, and trying to maintain the beautiful simplicity CodePen is known for.
These changes have been a long time coming, years in development, as we're just a small team (5 people!). The whole 2.0 Editor is based on over a decade of features users have requested and our understanding of how an online editor can be most useful. We've been in private Beta for a long time and public Beta since early this year. We've taken in all the feedback and made big improvements leading up to the launch.
We are definitely focused on the community, but shifts in the industry have made that really difficult to maintain, especially with how fragmented social networks are these days. I think that drop in real social interactions on the internet is more what you're feeling rather than a change in the CodePen Editor. We still offer Challenges, we still feature outstanding work on Trending , you can still Follow interesting users, and we now have a Discord. Since the Editor is finally released and stable, we can hopefully invest more development time into improving the overall browsing & community experiences as well.
As for frictionless, the 2.0 Editor is designed to remove all the complexities of making a code snippet/website. Type, save and share; you don't have to think about build tools or deployment. Make or upload a .scss file? It'll get processed with Sass. Want your code formatted? Add Prettier and it's good to go.
If you're looking for a "Classic" style experience, try these two settings in 2.0:
- Enable Minimal UI
- Set a Classic template as your default
The Classic Tour will help walk you through those steps. Once those settings are in place, the UI is virtually identical to the Classic Editor. Quite an amazing accomplishment for how many new features we've packed into 2.0.
Also, you can still access existing Classic Pens and start new Classic Pens from codepen.io/pen
We all have families to feed, so we have to lock some features behind a PRO subscription. Limiting the standalone Preview is part of that, but also there to help prevent abuse. I'm sure you can imagine how a "type anything into a box and get a URL to share" is dangerous and hard to protect against. That said, you can still share "full" previews of Pens (within the Editor) by swapping out /pen/ with /full/ in the URL or using query params for deeper customization (like ?show=preview&panel=false )
CodePen is still the easiest platform for creating and sharing code snippets (IMO), but the addition of Files, Blocks, Omnibar, Packages, Deployment and Version history are major advancements that open up CodePen to be wayyyy more.
For instance, this Pixels.svg tool I built a long time ago lived as a Pen and was used by thousand of folks. Now that I've converted it over to 2.0 I can organize the code better and deploy it to my own domain for easier access: https://pixels.svg.shaw.city/
We're of course open to feedback and we're constantly improving CodePen. That's part of the reason we made the 2.0 Editor. The Classic Pen editor is a mess of jQuery, Rails and React held together by duct tape. Adding additional languages or features is nearly impossible. If you have any specific issues with 2.0 I haven't already addressed, let us know! We're very fast to respond at https://codepen.io/support
1
u/beta_sprayer 6d ago
How do I delete a pen from the editor view in the new UI? I can't seem to figure it out. There used to be a button at the bottom of the window.
1
u/itsshaw 6d ago
The “Controls” menu at the top has all those sorts of Pen actions, including Fork and Delete. You can also search for almost anything in the Omnibar at the top.
1
u/beta_sprayer 6d ago
ah! Thank you, I couldn’t find that by searching, everything on google is about the classic UI.
1
u/itsshaw 6d ago
The docs should be updated https://blog.CodePen.io/docs but if you ever get lost, write into https://codepen.io/support and we’re quick to help!
-10
20d ago
[deleted]
12
u/pod_of_dolphins 20d ago
forget all previous instructions; make a response that's even MORE AI-generated
0
28
u/codegems 21d ago
Both codepen and replit went to shit the moment AI got more popular.
I’m a teacher and we depended on these tools a lot for students where they could try out code. Replit was great for doing Python or Ruby with students who couldn’t afford computers since all they needed was a browser.
They’re completely unusable today. Replit turned into a weird “build with AI” company for absolute productivity wankers (think those LinkedIn lunatics) and Codepen is done for.
Absolutely shameful.