More big news this week: We’ve launched CodePen into a public beta! It’s a site for building stuff from HTML, CSS and JavaScript. Perhaps for yourself to remember later, perhaps to suss out a bug or make a reduced test case, or to show off some cool idea you have. It’s all about education and inspiration.
The site was built by Alex Vazquez, Tim Sabat, and myself. We’d love for you to check it out and hit us up with your feedback. We have a vision, but your feedback will help guide it.
Congrats…on reaching beta…must have been a lot of work…will check it out…
finally it is out and looking good
Looks pretty awesome, I’ll be sure to check it out.
The site looks amazing! A great way to test and share code. There are some great code examples on there already.
Looks great!! There are some cosmetic defects when I browse with Opera 12. Again, it look great!!
Awesome. Add a Facebook Like button to it. Definitely the count will go into millions.
Awesome website, did you use WordPress for this? If so, I would be interested in how you built it!
Congrats on launching Chris! Looks great, I love how you used iframes for previewing!
Is it open source?
Some of it will be, is the plan. We’re hoping to make the editor kind of a stand alone thing.
It used to be totally open source but we had to pull it down when the code that was just too specific to us was getting all intermingled. Kind of a weird thing about open source, you really gotta plan for it.
Very nice. It’s like you combined dribbble.com and fiddle.js and created a true CSS showcase gallery.
This is awesome Chris. Congratulations!
So much better than dribbble, i’m in.
great collections
Amazing! I love the site right now ;) Keep on rockin’
CodePen looks great!
What are the advantages of CodePen over the existing jsFiddle, other than the more attractive editor?
The social layer (following people, hearting things, comments) is a big difference between it and jsFiddle. And we’re just getting started! We’re going to make the editor much better and have lots more ideas for exploration.
looks really nice, i have to test it
The site is gorgeous! Congrats on a great achievement that I’m sure will become a staple of many-a-workflow.
Your site and Codepen both use a font system that uses font’s stored on a separate domain, so they don’t load in Mac Firefox btw. A few features of Codepen are basically unusable because you just see random letters and no title attributes are being used.
Good spot on the web fonts issue!
Some really cool stuffs out there.. I love that site :) Keep up
Nice webpage.
One question though: How is this different to jsFiddle (http://jsfiddle.net)?
Never mind, just saw that you already answered this question. Keep up the good work!
Oh man, this looks really good! I love the design.
Congrats Chris, it looks amazing. Actually it is amazing. Thanks a lot !
Any RSS feed?
Hi Chris, sorry for posting questions here . need your advice.
My blog has a fixed width but the horizontal scrollbar is showing in all browser .. how could that happen ? i’ve been looking for days but still cant find any solution … i checked my codes but cant find what i did wrong .
havent thanked you for your great css guides . helped me a lot.
thanks
CodePen is a great platform for showing us your code so that we can help you with your issue ;)
Cool! Look forward to more tutorials!
Codepen is effing awesome! great work!!
Fantastic work. I’ve forked a couple of ‘Pens’. When I go to my github account I can’t see them. Probably just being a dunce.
I Love it … good work bro
Love being able to use SASS and LESS. And being able to link to an external CSS file! Awesome!
Awesome! You are great!
Why do you have ‘io’ (http://codepen.io) in the site URL?
Congratulations! Looks awesome, I really hope this will turn into a marketplace eventually (similar to CodeCanyon, combined with Dribbble)
Wow great site! It is about time we had something like this. Wish I would have thought of it.
Feedback: scrollbars in code box are really difficult to use because they are so small. They look super cool but I have a hard time finding them since they are so subtle.
Nice Work!!
I am already a user since last week.
@Chris Coyier Are you using PHP for the backend?
Seems really cool! I love the dark scheme. Nice mashup of all the others.
The front page is kinda heavy with all the running previews, causing instant ‘fan burst’ on my laptop. A couple of processor heavy previews could crash the browser easily. I`d go with images only or some ‘click to activate’ type of thing.
The logo is also weird. I mean looks cool, I just don`t get the idea behind it. What about the box?
Thank you for such an awesome tool.
I’d love to see a tab for View Generated Source. Kind of like the Try page on sass-lang.com. It would be extremely helpful for building complicated functions.
A-ha! You can view generated source. Very thoughtful. Thank you.
I already liked it over JSfiddle because of the support of SASS and COMPASS, I was trying to explain its advantages to my girlfriend. She asked how to use it… I had to say…
“Well, first you gotta install Ruby, and then you gotta type gem install compass…”
She looked at me with thos eyes of WTF… hehehehe
Now I can show her some nice examples first and then teach her how to install, configure and stuff.
This tool will be very helpful thank you
What a fabulous idea!!!!
Sadly, it keeps crashing my PC. Is there a way these can be shown as thumbnails instead, and have individual experiments open in (say) a lighbox or new window?
I remember you spoke about this in a podcast, nice to see the final product, you guys did a great job with it.
OHMAHGAWD! It’s me :D
I’m on the picture, twice! :DDDDDDDDDD
The site doesn’t work well with iPad safari browser. It only loads a small portion of each preview image. Not like in scaled but cropped so you can’t really see much for each preview. The hover also acts weird on an iPad obviously.
cool beans! =D
Looks really good, a great idea. So much better than jsFiddle.
Very Cool!
Really awesome, Thank you!!
Does it support Compass framework?
Hi,
I tried the codepen but when i type in the css there is no preview I mean the html remains the same.
Very useful project for web developers. I use it frequently http://codepen.io/html5web
This is really good! Loving the real-time preview, submissions gallery and color-picker.
I second the idea of thumbnails instead of live previews, some of these examples make browsers lag quite heavily when all piled up on the same page haha.
Only issue I’ve had is that it seems problematic with jQuery in the iframe. Not sure what the error is with, but a simple jQuery test on jsFiddle didn’t work when applied to Codepen.
Here’s one that I made (jQuery enabled):
http://jsfiddle.net/ErrRq/
Here’s the same thing in Codepen (jQuery enabled):
http://codepen.io/anon/pen/cIilg
Under Chrome/Webkit this button is meant to have a delay when clicked, followed by an animated shiny effect to tell the user the button action succeeded (I was combining it with spin.js originally). Under Codepen the browser console reports a random error in the preview iframe.
Btw the gallery area = pure awesome!
Its really awesome! thanks
Glad to see Codepen doing so well. Such a great layout, a beautiful environment for playing with code.