React SSR & Next: What if we took the worst parts of devops, and writing components/hooks, then added in obscure erroring that's impossible to debug?
10 hours ago
2
0
0
0
Posts by Shaw
image from inside Artemis II text: i need more men to understand that two men crying and hugging in space after one of them announced they were naming a moon crater after the other one's late wife is actually what peak masculinity looks like.
5 days ago
27092
4891
347
274
Apex Domains work with CodePen Deployed Pens.
This Pen:
codepen.io/editor/chris...
Points to this domain:
bendtreehouses.com
Because I'm using Cloudflare for the DNS, which supports CNAME records "at the root" that point to domains.
Two minutes explains all:
www.youtube.com/shorts/7Qja1...
6 days ago
19
4
2
1
CodePen now has a Lightning CSS Block. It's a "syntax lowerer" (like Babel is for JS, but for CSS). It respects your browserslist! It's a bundler! It's a minifier!
1 week ago
28
5
1
1
CodePen in Gamedev.js Jam 2026
Win THREE CodePen Pro Starter accounts for 12 months each in #GamedevJS Jam 2026!
gamedevjs.com/jam/2026/#co...
#gamedev #gamedevjs #CSS #CodePen #Pro #Starter #CodePenChallenge #playground #sandbox
1 week ago
4
3
0
0
Rather than the same old boring internet pranks, I thought I'd build something more fun this April Fools.
CSS or BS. Can you tell your CSS properties names from BS?
www.keithcirkel.co.uk/css-or-bs
1 week ago
219
81
22
27
Yes. PRO-only feature.
1 week ago
1
0
1
0
Advertisement
Ever needed a little more customization for your Pen's thumbnail? PRO users on @codepen.io can upload their own custom screenshot!
youtu.be/cwN46KQEI6Q
1 week ago
3
0
2
1
Gonna print this out for my kids! 😄
1 week ago
1
0
1
0
Unless… (gulp)… I call for an appointment 😰
2 weeks ago
1
0
1
0
"Failed to fillFrame. Frame is missing uuid" error in browser console
Just trying to book a haircut and now I'm debugging the website because the login form doesn't work.
2 weeks ago
4
0
1
0
Just as a reminder — all these cool fonts are available to use on @codepen.io as well.
2 weeks ago
42
5
0
0
Haha; I'm not offended. Big changes always take adjustment, but we're listening to feedback & helping where we can. If you just like the classic vibes, give those tips a try! We took a lot of time trying to keep the beautiful simplicity of the old editor while opening up a whole new world for Pens.
2 weeks ago
1
0
0
0
Hi! CodePen Dev here 👋
Anything in particular about 2.0 that's giving you trouble?
If it just feels different, we do offer a lot of settings that help you get back into a Classic CodePen feel, while still getting access to all the new features.
bsky.app/profile/shaw...
2 weeks ago
0
0
1
0
If you love the Classic @codepen.io Editor and want that same feel in the 2.0 Editor, here are some quick tweaks to get you back into familiar territory.
Try the 2.0 Editor: codepen.io/editor/pen
2 weeks ago
18
6
1
7
Thread and video in case you've feeling the "Oh no! CodePen is going to be different!" feels.
2.0 can be almost identical to Classic, only dipping into new features when you're ready.
2 weeks ago
22
6
0
1
Understandable that it’s hard to switch, but giving it a real try (and making a few tweaks bsky.app/profile/shaw...) should win you over.
If you feel there’s anything missing or tricky about it, let us know!
2 weeks ago
1
0
0
0
Advertisement
Classic Block visual configuration
Yes! Super handy. That was something I really pushed for to help keep the focus on the important user code.
You can even configure it through the Classic Block visual config and the classic.config.json file to add extra styles & scripts, modify the <head> or add classes to the <html>!
2 weeks ago
2
0
0
0
@arzidava.com Hi! Saw your comment about CodePen Classic and couldn't follow up in that thread, but I wanted to share this walkthrough of how to make CodePen 2.0 have that Classic feel:
bsky.app/profile/did:...
2 weeks ago
1
0
0
0
Followup for anyone who finds this thread: Here's a more complete tutorial on getting a Classic Feel in CodePen 2.0
bsky.app/profile/did:...
2 weeks ago
1
0
0
0
@anatudor.bsky.social I saw your thread, but couldn't reply to you directly there.
I know I've sent you some tips before, but I made a solid tutorial on how to get CodePen 2.0 feeling like the Classic Editor with just a minute or two of setup.
bsky.app/profile/did:...
2 weeks ago
0
0
0
0
If you get stuck on anything or are having trouble with the 2.0 Editor, write us at codepen.io/support and we'll be happy to help.
Happy Coding!
2 weeks ago
0
0
0
0
Overall, you don't need to worry about Files & Blocks or any of the amazing new features in 2.0 if that's not part of your interest/flow. After these steps you won't need to think about them, but they'll be ready for you when you are.
blog.codepen.io/docs/what-ch...
2 weeks ago
0
0
1
0
The Settings modal in the CodePen 2.0 Editor showing the layout options with a Default Orientation setting.
Bonus Tip: You can set Default Layout & Orientation in the 2.0 Editor under Settings > Layout if you love the Classic Editor's "Top" orientation.
2 weeks ago
0
0
1
0
Template setting under the Controls Menu in the CodePen 2.0 Editor
Default Template setting in the CodePen 2.0 Editor
3. Use the Default Template setting to keep your setup on new Pens.
After you've set up a Pen the way you like it, make it a Template and set it as your Default Template so that every new Pen will start with the same Files & Blocks.
2 weeks ago
0
0
1
0
Advertisement
CodePen 2.0 is designed to Just Work™.
If you add a .scss file, we process it into .css using Sass. That magic is called "Blocks" and we have a bunch of them to handle stuff like Markdown/Prettier/TypeScript but you don't need to know anything about them or do any config to have it all work.
2 weeks ago
0
0
1
0
Rename File option in the Omnibar
index.pen.pug to automatically scaffold out the HTML and link up the CSS & JS.
This Classic Block Template is a good starting point: codepen.io/editor/pen?t...
Or you can right click the index.html file & select rename, or search "Rename" in the Omnibar.
You can also use *.pen.pug, *.pen.md, and *.pen.njk to have the same automatic scaffolding with Pug, Markdown & Nunjucks!
2 weeks ago
0
0
1
0
index.pen.html file simplifying the HTML in the CodePen 2.0 Editor
2. Rename to index.pen.html to simplify the HTML
The processing in 2.0 Pens is mostly based on file extensions (e.g. script.ts = TypeScript).
Use *.pen.html to have the CSS & JS linked up & the rest of the HTML scaffolded for you, so you only see the <body> content like the Classic CodePen Editor.
2 weeks ago
3
2
2
0
CodePen 2.0 Controls Menu with Minimal UI enabled
1. Enable Minimal UI from the Control Menu
This global setting tucks away the Sidebar to focus in on the Editors & Preview like the Classic Editor.
You can still get to the Sidebar by hovering near the edge, clicking the toggle, or using the Omnibar to search for Files/Settings/Shortcuts.
2 weeks ago
1
0
1
0
If you love the Classic @codepen.io Editor and want that same feel in the 2.0 Editor, here are some quick tweaks to get you back into familiar territory.
Try the 2.0 Editor: codepen.io/editor/pen
2 weeks ago
18
6
1
7