CodePen Blog
418: CodeMirror 6
Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new theming options available in the editor.
Time Jumps
* 00:00:05 Welcome to CodePen Radio in 2026
* 00:01:07 CodeMirror’s journey with CodePen
* 00:07:41 Getting different language support in CodeMirror
* 00:13:26 Improved search and developer experience
* 00:15:30 Support for Emmet
* 00:18:21 Theming CodeMirror
* 00:21:11 Great support from CodeMirror
418: CodeMirror 6
Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new theming options available in the editor.
Time Jumps
* 00:00:05 Welcome to CodePen Radio in 2026
* 00:01:07 CodeMirror’s journey with CodePen
* 00:07:41 Getting different language support in CodeMirror
* 00:13:26 Improved search and developer experience
* 00:15:30 Support for Emmet
* 00:18:21 Theming CodeMirror
* 00:21:11 Great support from CodeMirror
CodePen
418: CodeMirror 6
Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into…
Html codes
Photo
CodePen Blog
Chris’ Corner: SVG Tools
You can kinda smell a vibe-coded app these days. TypingSVG has that odor, but like… in a good way? An app like this absolutely should exist. Someone needed it, and how instead of it just being some little tool they’ve tucked away for themselves or thrown away, they tossed it up on some inexpensive hosting and now we all have it.
I give it some text and a variety of options and it produces an SVG file with a typing animation on it. Like this: https://blog.codepen.io/wp-content/uploads/2026/02/cp-svg.svg This animated SVG will work even as an , which might be news to some. They’ll let you hotlink the image (so it works with query params, essentially), but I’ve uploaded it to our own site for longevity.
Why does it look vibe-coded? Involvement of purple. Vercel subdomain. Random dark mode for no particular reason. Very simple componentry with box shadows around everything. I suspect this look will just be a funny blip in time, as I’m already noticing a new fancier aesthetic emerge from Claude Code that uses their Front-end Design Skill that involves kinda classy all-caps headers and footers with more exotic font choices.
OK I guess we’re doing SVG now, so here we go.
I don’t know if Stroke is vibe-coded, but maybe! There is one where you draw (kinda begs for a signature), and then it animates where you just drew (drawed?). https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-8.05.32-AM-1024x500.png I’m not embedding this one as animated because it actually gives you a React component with a pretty hefty dependency (Motion). It’s a neat tool, but I find that a bummer, as I don’t think React or Motion is required for this to work, and it would be a lot more usable with some simple built-in styles or a web component with props to control it. SVG Doodles: “Browse a curated collection of free, customizable SVG doodles and icons to use in your websites, apps, slides, and prints.” https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-8.01.08-AM-1024x593.png You can almost use the straight-up SVG syntax directly in CSS (like as a background-image), which is very satisfying. You do have to URL encode a handful of characters. You aren’t gonna get syntax highlighting though. I’d have a stronger urge for CSS to make this even nicer, but
Poor SVG. It’s old technology that hardly ever changes, yet for as much as people find new cool uses for it, people also still find security vulnerabilities with it. This one is about clickjacking, which is basically half social engineering, that is, placing stuff on the page that tricks you into interacting with it.
I’ll leave you with Fotis Papadogeorgopoulos’
Chris’ Corner: SVG Tools
You can kinda smell a vibe-coded app these days. TypingSVG has that odor, but like… in a good way? An app like this absolutely should exist. Someone needed it, and how instead of it just being some little tool they’ve tucked away for themselves or thrown away, they tossed it up on some inexpensive hosting and now we all have it.
I give it some text and a variety of options and it produces an SVG file with a typing animation on it. Like this: https://blog.codepen.io/wp-content/uploads/2026/02/cp-svg.svg This animated SVG will work even as an , which might be news to some. They’ll let you hotlink the image (so it works with query params, essentially), but I’ve uploaded it to our own site for longevity.
Why does it look vibe-coded? Involvement of purple. Vercel subdomain. Random dark mode for no particular reason. Very simple componentry with box shadows around everything. I suspect this look will just be a funny blip in time, as I’m already noticing a new fancier aesthetic emerge from Claude Code that uses their Front-end Design Skill that involves kinda classy all-caps headers and footers with more exotic font choices.
OK I guess we’re doing SVG now, so here we go.
I don’t know if Stroke is vibe-coded, but maybe! There is one where you draw (kinda begs for a signature), and then it animates where you just drew (drawed?). https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-8.05.32-AM-1024x500.png I’m not embedding this one as animated because it actually gives you a React component with a pretty hefty dependency (Motion). It’s a neat tool, but I find that a bummer, as I don’t think React or Motion is required for this to work, and it would be a lot more usable with some simple built-in styles or a web component with props to control it. SVG Doodles: “Browse a curated collection of free, customizable SVG doodles and icons to use in your websites, apps, slides, and prints.” https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-8.01.08-AM-1024x593.png You can almost use the straight-up SVG syntax directly in CSS (like as a background-image), which is very satisfying. You do have to URL encode a handful of characters. You aren’t gonna get syntax highlighting though. I’d have a stronger urge for CSS to make this even nicer, but
shape() quells my desires since it’s so good at doing its own thing. David Bushell has a nice SVG Optimization and Accessibility Basics guide.Poor SVG. It’s old technology that hardly ever changes, yet for as much as people find new cool uses for it, people also still find security vulnerabilities with it. This one is about clickjacking, which is basically half social engineering, that is, placing stuff on the page that tricks you into interacting with it.
I’ll leave you with Fotis Papadogeorgopoulos’
@svg-use, which I haven’t tried yet, but it’s a way to lean into SVG’s <useelement. I can say that there are a ton of pro’s and con’s to all the ways to display SVG. I too was enamored with <usefor a while as it seems like it can be so efficient in so many ways. It can be, but the downsides are real, like the lack of stylability and the inability to load from a third-party domain. But this tool is deeply in JavaScript, which I imagine can take a stab at solving both.❤1🔥1
import requests
import json
# Replace with your actual credentials
BOT_TOKEN = "YOUR_BOT_TOKEN_HERE"
CHAT_ID = 123456789 # Replace with target Chat ID
MESSAGE_ID = 11991 # Replace with the message ID you want to react to
def set_reaction():
url = f"https://api.telegram.org/bot{BOT_TOKEN}/setMessageReaction"
payload = {
"chat_id": CHAT_ID,
"message_id": MESSAGE_ID,
# The reaction must be a JSON-serialized list of ReactionType objects
"reaction": json.dumps([{"type": "emoji", "emoji": "🔥"}]),
"is_big": True
}
try:
response = requests.post(url, data=payload)
response.raise_for_status() # Check for HTTP errors
print(f"Response: {response.json()}")
except requests.exceptions.RequestException as e:
print(f"An error occurred: {e}")
if __name__ == "__main__":
set_reaction()
A program that visualizes the phases of the moon and recent astronomical phenomena ⬇️
https://ai.studio/apps/cca188c7-9c63-4d0d-b71d-ec37183956a1?fullscreenApplet=true
https://ai.studio/apps/cca188c7-9c63-4d0d-b71d-ec37183956a1?fullscreenApplet=true
Which of the following are true about canvas:
Anonymous Quiz
71%
Pixel based
14%
Resolution independent
14%
The same as <svg>
Html codes
Photo
CodePen Blog
Chris’ Corner: Cool Things
Dave has this classic idea for a Web Components Sommelier. Like many of Dave’s ideas, it’s equal parts joke and brilliance. The idea is a person with deep knowledge of an absolute ton of different Web Components who can suggest ones that do just the right thing in any situation. Like a wine sommelier who can suggest the perfect wine to pair with a meal and meet the diner’s tastes.
Need to compare two images? Of course, ma’am, here you go. Need pinch-and-zoom support on any element? Right away, here you go. Need to render some Markdown? As you wish, here you are.
I think of the sommelier thing every time I see a new cool web component, especially if it’s got that “stand-alone” quality where you can just link it up and use it immediately. Here’s an example! spoilerjs. All you do is:
Then you can use the web component to wrap whatever, which hides it with these cool particles.
Click it, and the particles disperse, revealing the spoiler. https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-21-at-3.00.18-PM-1024x838.png I’ve seen TWO games that:
1. Involve horses.
2. Use the
I dunno, just seems notable.
The game at enclose.horse has you building walls to enclose areas that yield the most area/points. The “game” at gradient.horse has you drawing your own horse (and horse parts) that then goes to join a parade of other rather happy horses. https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.41.06-AM-776x1024.png I’m honestly not sure if liquid glass is still interesting or not (I suspect interest has waned), but I do quite like this generator thingy: Aether CSS. I like it because there are lots of options for the final look. Sometimes it’s frosted, and sometimes it’s not. Sometimes there is a lot of distortion; sometimes, a little. Sometimes the light hits harder than in other examples. There is no right or wrong (until you can’t read the text, then it’s wrong). https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.39.17-AM-1024x1005.png https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.39.24-AM-1024x1010.png The Web Audio API remains extremely cool. But sometimes you just need a little audio file of a neat little sound. jsfxr is kinda both.
Jsfxr is an online 8 bit sound maker and sfx generator. All you need to make retro sound effects with jsfxr is a web browser. It’s a JavaScript port of the original sfxr by DrPetter. You can also use it as a JavaScript library for playing and rendering sfxr sound effects in your games.
You adjust all these levers to make small sounds, then can output the sound to use without any API or library usage. The random button is very fun. https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.30.02-AM-771x1024.png Weird aside: remember when we used to have the term adaptive, as an alternative to responsive? As best I can remember, it meant a site that had
Chris’ Corner: Cool Things
Dave has this classic idea for a Web Components Sommelier. Like many of Dave’s ideas, it’s equal parts joke and brilliance. The idea is a person with deep knowledge of an absolute ton of different Web Components who can suggest ones that do just the right thing in any situation. Like a wine sommelier who can suggest the perfect wine to pair with a meal and meet the diner’s tastes.
Need to compare two images? Of course, ma’am, here you go. Need pinch-and-zoom support on any element? Right away, here you go. Need to render some Markdown? As you wish, here you are.
I think of the sommelier thing every time I see a new cool web component, especially if it’s got that “stand-alone” quality where you can just link it up and use it immediately. Here’s an example! spoilerjs. All you do is:
import 'spoilerjs/spoiler-span'; Then you can use the web component to wrap whatever, which hides it with these cool particles.
spoiler-span>
It's a sled. spoiler-span> Click it, and the particles disperse, revealing the spoiler. https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-21-at-3.00.18-PM-1024x838.png I’ve seen TWO games that:
1. Involve horses.
2. Use the
.horse TLDI dunno, just seems notable.
The game at enclose.horse has you building walls to enclose areas that yield the most area/points. The “game” at gradient.horse has you drawing your own horse (and horse parts) that then goes to join a parade of other rather happy horses. https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.41.06-AM-776x1024.png I’m honestly not sure if liquid glass is still interesting or not (I suspect interest has waned), but I do quite like this generator thingy: Aether CSS. I like it because there are lots of options for the final look. Sometimes it’s frosted, and sometimes it’s not. Sometimes there is a lot of distortion; sometimes, a little. Sometimes the light hits harder than in other examples. There is no right or wrong (until you can’t read the text, then it’s wrong). https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.39.17-AM-1024x1005.png https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.39.24-AM-1024x1010.png The Web Audio API remains extremely cool. But sometimes you just need a little audio file of a neat little sound. jsfxr is kinda both.
Jsfxr is an online 8 bit sound maker and sfx generator. All you need to make retro sound effects with jsfxr is a web browser. It’s a JavaScript port of the original sfxr by DrPetter. You can also use it as a JavaScript library for playing and rendering sfxr sound effects in your games.
You adjust all these levers to make small sounds, then can output the sound to use without any API or library usage. The random button is very fun. https://blog.codepen.io/wp-content/uploads/2026/02/Screenshot-2026-02-22-at-7.30.02-AM-771x1024.png Weird aside: remember when we used to have the term adaptive, as an alternative to responsive? As best I can remember, it meant a site that had
@media query breakpoints that changed layout, but the layouts were rather fixed after that, as opposed to the fluid grids of responsive design. The jsfxr site is adaptive.CodePen Blog
419: Why 2.0?
CodePen 2.0 was the most ambitious project that we’ve ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We’ve been around a long time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we could serve both in a powerful and flexible way, taking us into the future.
Time Jumps
* 00:00:27 Alex!
* 00:00:52 Why are we building CodePen v2?
* 00:06:53 Get used to seeing Blocks
* 00:19:13 The UI and UX is custom to CodePen
* 00:21:55 AI
419: Why 2.0?
CodePen 2.0 was the most ambitious project that we’ve ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We’ve been around a long time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we could serve both in a powerful and flexible way, taking us into the future.
Time Jumps
* 00:00:27 Alex!
* 00:00:52 Why are we building CodePen v2?
* 00:06:53 Get used to seeing Blocks
* 00:19:13 The UI and UX is custom to CodePen
* 00:21:55 AI
CodePen
419: Why 2.0?
CodePen 2.0 was the most ambitious project that we’ve ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We’ve been around a long t…