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.

Say I have a Pen:

See the Pen Idea for Simple Wufoo Ad by Chris Coyier (@chriscoyier) on CodePen.

And I want to make a variation:

drag to resize

See the Pen GobXzL by Chris Coyier (@chriscoyier) on CodePen.

1) Make a brand new Pen

Could be a fork of the original. Doesn’t have to be. If it is a fork, delete all the code from all the editors.

2) Import the HTML

3) Import the CSS and JS

In the Settings for the Pen, link up the master Pen’s CSS and JS, like this:

Make sure the variation Pen has the same other external resources. You may have to do that part manually.

Add variation code

Now any fundamental updates you can make in the master Pen, and the variation Pen remains just a variation

Pretty useful in situations like this.