CodePen is best place to build, test, and discover front-end code. CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.
The possibilities are endless. Everything you do is saved on CodePen, so the more you use it the more useful it becomes.
Write HTML Markdown, Haml, Slim, or Pug. Write CSS in Sass, Less, Stylus, or PostCSS. Those are just some of the preprocessor syntaxes you can use on CodePen. We want you to feel comfortable in whatever languages you already know and like.
And we also want you to be able to explore and learn new ones easily.
Or, don’t use them at all. You do you.
Your profile on CodePen is like your front end development portfolio. You can showcase all your best work there. Proof positive you’re the genius your mother always told you you were.
Any Pen can be embedded on any other website. It’s just some simple copy-and-paste HTML code. Embedded Pens are the most compelling way to display code demos. Not only can you see the real final rendered result (screenshots, pshaw) but you can see all the code used to make it in luscious syntax highlighting.
You have complete control over the look of the Embedded Pens. With our Embed Builder, you can quickly change colors and settings, even making them into a theme you can apply to multiple Embedded Pens. Or you can take complete control by applying your own custom CSS.
CodePen is perfect for sharing code at conferences and meet-ups through an overhead projector. We even have Presentation Mode which is specifically for this purpose.
In Presentation Mode, the screen can be arranged just how you like it to display the code and result you want to show. Adjust settings on the fly to make things easier to see. Then quickly give your viewers a URL to the very code you are presenting.
CodePen can be used for teaching in all kinds of different ways. Teachers can provide instructional Pens that students need to fork, work on, and then turn back in.
Need to present to the class and get everyone on the same page? Professor Mode updates the students screens in real time. Better than video by a mile.
CodePen is a community. You follow other developers. Other developers follow you. You love, collect, and comment on other peoples Pens. Other people love, collect,and comment on your Pens.
The social aspect is part of what makes CodePen a fun place to be.
Projects is the most powerful feature of CodePen. It’s a full blown IDE right in the browser, with automatic preprocessing, drag and drop uploading, live previews, website deployment, and much more.
Free users can have a play with a single Project, but PRO users get more Projects, more files per Project, and more deployments and custom domains for their Projects.
Collections are groups of Pens. It’s a way to organize and share Pens that have some useful or fun connection.
You might create a Collection of user interface components you’d like to implement on a particular project. Or a group of Pens that serve as starts for assignments in a web education class. Or a group of Pens that are a tribute to The Smurfs. Anything you want!
Unlock the full power of CodePen with PRO features like unlimited privacy, asset hosting, real-time collaboration, theming, and more.
See your preview update live in a different browser window on as many different devices as you want.
Drag and drop files onto the editor to host them on CodePen. Copy the URL and use them in seconds.
Coding is better together. Pair program with 2-6 people anywhere in the world in real time.
With (unlimited) Embed Themes, you can instantly change the look of all Embedded Pens and update them anytime.
You type, up to 100 students watch and interact with your code in their browser.
Keep the Pens you make private. They can’t be discovered or searched for unless you explicitly make them public.
Make you look like you. Apply Custom CSS to your CodePen profile page and your embedded pens.
You won’t see any if you’re PRO, and other people won’t see them on your work.The best place to build, test, and discover front-end code.