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.
Adding new elements, positioning them, and changing their properties (e.g. color / rotation / overall lighting) is all done very easily and intuitively in the interface.
When you are done, you get the HTML and CSS provided! Just go to the Preview mode and you’ll see the code along the left. Pretty sweet. If you want to continue playing with the code itself, of course CodePen is a great place to do that. To make it even easier Julian included an Edit on CodePen button right on the page.
Click that button and have a new prefilled Pen ready to go with your creation.
In addition to just being a useful place to play with the code, having your creation on CodePen is useful for a number of other reasons.
- It’s backed up somewhere under an account you own.
- CodePen allows you to use Prefix Free, which is great here because the CSS output is unprefixed and Prefix Free will make it work in as many browsers as it can.
- You can export it as actual files to your computer. Or to your GitHub account as a Gist.
More on Prefilling Pens
How does Tridiv do this exporting feature? It’s pretty simple really and anyone can do it. I’ve updated the documentation on Prefilling Pens with more detail, live examples, and information on how to add a button dynamically to code blocks.