CodePen Blog

This is where we post announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. There's an RSS feed.

Using Babel Polyfills

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 […]

Sharing Projects with Particular Files Open

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. […]

Caching and Pens as External Resources

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 […]

Using Resources from npm on CodePen

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 […]

window.prompt and localStorage for API Keys

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 […]

Emmoooojiiiii

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 […]

New Feature for Everyone: Custom Tab Triggers! (and Emmet 2.0)

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 […]

Multi-Pane Editable Embeds

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 […]

139: Emmet

We’re talking Emmet – a handy toolkit of shortcuts for developers. CodePen just pushed version 2 live (with some customizations!) so we thought we’d talk about how and why we’re using Emmet on CodePen.

Live View Popout

There are a couple of little tiny new buttons you’ll see, one in the Pen Editor and one in the Project Editor. It’s this little bugger: It gives you one-click access to pop open a Live View window, which is a real-time updating preview of your code. Live View isn’t only useful for testing other […]

← Older posts
Newer posts →