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.
Step 1: Use Slides.com
It’s pretty awesome. It’s a visual editor for slide decks, that are ultimately HTML/CSS/JS, so you can link to exact slides, search them, copy and paste… all of what makes the web useful.
Their PRO plans allow for custom CSS control and private decks… HEY that’s a lot like CodePen! =)
Step 2: Make a new deck and insert an iframe element
It’s one of the things you can put on a slide, just like text, images, shapes, blocks of code, etc.
Step 3: Click “Embed” on the Pen You Want
We’re looking to copy and paste the <iframe> embed code we provide. So after the embed dialog is open
- Click the iframe tab
- Click on the Make code editable checkbox
You’ll need to be PRO (and embedding a PRO-owned Pen) to make the embed editable.
Step 4: Paste the iframe code into the iframe
Slides.com is smart enough to strip away anything it doesn’t need when you paste in there (it’s just looking for the iframe src).
This is where you’ll change the height of the iframe to match the box you made in that slide. You can also edit the URL params there to do things like change which theme is in use and which tabs show by default.
To get the most bang for your buck for editability, you’ll want to show both code and result, like default-tab=css,result
Step 5: Bask in your awesome interactive slide
The Pen used here was a fork of Bertan Yaman’s Pen.