ICYMI: CodePen has a full-blown read/write REST and GraphQL API
blog.codepen.io/docs/api/api-v…

Now, the REST API is fully desribed by an OpenAPI 3.1 document, so it's easier for agents and automated tooling to digest and build stuff around. api.codepen.io/docs#descripti…

The GraphQL API has introspection and a playground, so... same. api.codepen.io/v2/graphiql

My mom visited last week.

We built a website with @CodePen.

Here's a 2-minute video showing off WebMCP + CodePen + ChatGPT App:

youtube.com/watch?v=T0b6l2…

You can take advantage of WebMCP in other ways.

@claudeai Code fan? Install the great `agent-browser` CLI tool from @vercel Labs and remind the agent it has it. Then tell it to open up CodePen `--headed` and you can control CodePen directly from there.

Here's another 2-minute video on that:
youtube.com/watch?v=WUCTj2…

"Kinetic countdown (CSS only)" by Stijn Van Minnebruggen

codepen.io/editor/donotfo…

The in-app notification for CodePen AI was fun to make. Penny gets to zoom around the <dialog> in a <canvas> with GSAP to make it smooth.

@CodePen Putting a canvas inside a <dialog> for a mascot is such a fun touch. Did you consider SVG for Penny, or did canvas win on performance once she's zooming around? Curious where you draw that line.

@adircode It's not always a clear choice between the two! But in many cases, canvas will be slightly more performant for moving shapes or more complex transformations. We do have an SVG version of Penny used in simpler instances.

How does CodePen AI do with the Cool S? With squigglevision? Friggin nailed it.

(Wait... CodePen has AI now? codepen.io/features/ai 👀)

@CodePen All these cutesie new features, and yet it seems no longer possible to add a pen to a collection.

What gives?

@emjayess Share Menu > Add to Collection, or just search for "Collection" in the Omnibar.

"Scroll-triggered animations: Variable Font: expand, shrink, squoosh" by utilitybend

codepen.io/editor/utility…

"Ghosts" by Curtis Lawrence

codepen.io/editor/MisterC…

@CodePen @bielok_ I love that both options are there. Will say I was worried that 2.0 would replace the original. Nothing beats it.

@bozdoz @bielok_ We're fans of Classic, that's why we spent so much time making 2.0 accessible for Classic users.

This is the 2.0 Editor with those options enabled, virtually identical to the Classic Editor while giving more processors, Deployment, Versions, Package support & more. Pretty nice!

Bring back the original CodePen @codepen.
This 2.0 update should not be forced on us.
Way too much friction and features we didn't ask for.

One of my biggest gripes with 2.0 is that it was not at all intuitive to add external libraries like GSAP. I have read the faqnow (thx). Frankly, having to copy and paste cdn urls seems like a step backwards, especially if you need GSAP, ScrollTrigger, ScrollSmoother and others in a new project.

blog.codepen.io/docs/what-chan…

@snorklTV One of the absolute best features of 2.0 is you don't have to think about adding external libraries, just

import gsap from 'gsap';

...and we do the rest!

This one's a bit excessive of an example, but here's a complete starter template for GSAP: codepen.io/editor/team/Co…

@snorklTV Try these two settings in 2.0 if you like that Classic feel:

1. Enable Minimal UI
2. Set a Classic template as your default

blog.codepen.io/docs/what-chan…

After that, the UI is nearly identical but you get all the new features!

@snorklTV You can also still access the Classic Pen Editor at codepen.io/pen

It's the final week of the January #CodePenChallenge!
This week, it's Game Over 👾

codepen.io/challenges/202…

Thanks @Redisinc for sponsoring: srv.buysellads.com/ads/long/x/TCM…

The January #CodePenChallenge continues!
This week, we're playing with puzzles 🧩

codepen.io/challenges/202…

Thanks @Redisinc for sponsoring! srv.buysellads.com/ads/long/x/TCM…