Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

I’m sure many of you know every nook and cranny of the CodePen Editor. But the truth is, most people don’t, and we don’t want to forget that. Even the concept of “write code here, see output right over there” isn’t entirely intuitive until you’ve done it once. The more you know about the software you use, the more productive and confident you feel using it. A win-win, surely.

So! While we have documentation, even specifically for Editor View, nothing beats a live, interactive tour. That’s exactly what we built:

You can go take the tour right now!

A Video of Me Taking the Tour

The tour isn’t available on Mobile, so just in case you need to see this thing right this second, I’ll record this video of me doing it.

The Tour is a User “Accomplishment”

That’s what we’re calling it internally, anyway. We’ve long wanted to have some kind of fun way to measure the things users do, milestones they cross, things like that. Perhaps some day it’s “badges”, or the like.

For now, you’ll see a little reminder in Editor Settings:

And you’ll get a different message if you’ve completed it.

It’s a system

High five to Rachel who took the lead on this one, and Sparkbox for the initial design.

It required a ton of interesting work on the front end. For example, sometimes the tour is in a state where you can’t click on anything but the one UI element we’re asking you to interact with. An overlay with a hole in it, essentially. Rachel figured out a clever way to handle that by stitching together multiple divs to cover everything but that element. All calculated by JavaScript, which is also doing other fancy calculations like figuring out exactly where to point and making sure it works on different screen sizes. It updates URL’s and responds to them so each step is linkable, even with a correct title. So many little details here that were done beautifully.

On the back end, the system for managing the steps is cleverly abstracted. There was a little light database updating required to track the accomplishment. All in all, a feature that covered a lot of ground and was awesome to watch Rachel knock out.

Because of how it was built, we can re-use it in other areas of the site, and very likely will as we move forward. Any tour requests?