On Monday, the US will be in the path of a total solar eclipse, and if you’ve been watching the Picks over the past few days you can probably tell we’re excited about it! Here are a few of my favorite eclipse-themed Pens. “Interactive Eclipse” by Michal might not be scientifically accurate, but it sure […]

Unlike templates, there is no URL you can hit to Fork a Pen or Project. There are some boring technical reasons for that. It’s us, not you 😉 But because there is no URL, you can’t, for example, right-click the Fork button and “Open in a New Tab” like you might want to. A bit […]

JavaScript is gettin’ better, gang. There’s incredibly useful stuff like async and await keywords that we’ll all find mighty handy. If you want to play with them on CodePen, you can! You can just put that code in the JavaScript editor and it will run just like anything else. A lot of us are used […]

CodePen Projects have URL’s like this: https://codepen.io/waldo/project/editor/ARwpxa That will take you to the Project Editor. None of the files will be open in the editor area though, and CodePen will take a stab at guessing for a file to open in the preview. For example, if there is an index.html file, that’s what we’ll open. […]

You can view the “raw” HTML, CSS and JavaScript of any Pen by appending a URL extension. That means you can also use a Pen as an external resource of any other Pen, or Project! We’ve seen some slight confusion here though, specifically in regards to caching. If you make a change to the Pen […]

These days, npm is the largest home of web project dependencies there is. It’s loaded with Node.js specific stuff, to be sure, but it’s also the defacto home for browser-JavaScript dependencies. Hence, it makes sense you might want to use things from npm on CodePen! Unfortunately, we don’t have a built-in direct way of doing […]

Let’s say you wanted to use some API in a Pen or Project here on CodePen, and that API required you to have an API Key. fetch(‘https://some-api.com/stuff?apiKey=lljkhafd09a8dof98adfaod9fd’) .then(response => {/* do something */}); At the moment, CodePen doesn’t have any great place for you to store “secrets”. As in, a private place for something like […]

Apparently, World Emoji Day was July 17th. So hey, we’re late, but why not celebrate! (That rhymed.) Here’s some of the most fun Emoji-focused Pens on CodePen! See the Pen Kitty Toggle by Natalya (@tallys) on CodePen. See the Pen Emoji Toggles by Chris Coyier (@chriscoyier) on CodePen. See the Pen Emoji rating by Bennett […]

We have a brand new thing for y’all that you can start using immediately: custom tab triggers! For example, you could now easily set up the editor so that when you type 1337 then press tab, it could expand into: <h1>I am the <strong>greatest developer<strong> ever.</h1> Or, perhaps just slightly more practically… you could make […]

We had a member ask us if there was a way to create an Editable Embed where all three panels (HTML, CSS, and JS) were visible at the same time for editing. That’s not a default option. Panels in embed are normally tabs, which you would look at one at a time. But, since Editable […]