What is CodePen Projects?

If you’re familiar with the term, you can think of it as an IDE (Integrated Development Environment) for building websites. Like all of CodePen, you use it right in your web browser.

You have a sidebar with all your files. You can create new files and folders there (even by drag and dropping from your computer), as well as delete, duplicate, and rename them.

You can view, edit, and rearrange your files in separate tabs.

Files can be preprocessed and tidied.

There is debugging in that your code can be checked for errors and you will be notified of problems.

You can preview what you are building as you build it.

The CodePen Project Editor is both very powerful and very comfortable. There is no setup, you just start using it.

Aside from this blog post, you can also check out our dedicated page for explaining Projects, as well as our documentation.

Why Would I Use This?

Sometimes the Pen Editor can be limiting. After all, it just gives you that one panel for HTML, CSS, and JavaScript. Plus all your Assets, like images, are stored globally in the Asset Manager.

With Projects, you can have lots of different files. A project could have 10 HTML files, 4 CSS files, and 16 JavaScript files. There are limits to the number and size of files, depending on your plan.

Here’s a simple use case: you want to make a personal website that has multiple pages: homepage, about page, portfolio page, and contact page. You can create all those within a single project now, and they all live happily together (and you can link between them) as you would expect them to.

How Does it Work?

If you want a peek behind the curtains of how CodePen Projects works, stay tuned to CodePen Radio where we’ll be discussing that in coming weeks.

Here’s a high-level overview. When you start a new project or open an existing one, you have a direct connection to a real mini-server in the cloud. It’s actually a Docker container, set up just for this, with a real file system including all your files.

When you add/delete/edit (then save) files, we’re watching that file system and doing the things we need to do to make it work. For example, we’ll process all the files (with our Gulp build process) and put them into place, and refresh your preview window. If you use Live View, it will update that as well.

What Happens to Pens?

Nothing! The Pen Editor is here to stay. We often say it’s the heart and soul of CodePen. There are well over 10,000,000 Pens created with it.

The Pen Editor and the Project Editor will co-exist. You can use whichever one makes sense to use for any given thing you are working on.

How is it Different to the Pen Editor?

Aside from being able to have multiple files and assets all together in one project, it isn’t too much different!

We try to make coding as comfortable as possible in both.

You Can Deploy & Domain Map Your Projects

This deserves some of these: !!!!!

We think sharing a URL to the Project Editor is extremely cool. Like Pens, you’re getting to see the behind-the-scenes action of how the web is built. And with the live preview, you aren’t just looking at the code, but what the code is doing.

But we also want you to be able to build real things with CodePen Projects that are for the world to see. We want you to be able to share a website you’ve built without any of the CodePen interface. Just a website like any other.

You can deploy a website to a special CodePen URL at any time. That will be an exact copy of your website. It is entirely public, for anyone to see.

Deployments are on demand. Your deployed website will not change until you deploy it again. That’s nice, because it means you can work on your project without affecting the deployed site. Development and production!

Taking this one step further, you’re able to map a real domain name to your deployed project. We give you IP addresses you can point DNS A-records at. Then your CodePen Project just becomes the way you manage your own website!

Differences in PRO Plans

PRO is really where Projects shines. Of course you get more Projects to work with with more files allowed per Project. Also, you get the deployment and domain mapping features we talked about. You’ll also get other PRO features you’re used to getting from CodePen, like Live View. Live View is great for writing code full-screen in one browser window and previewing in another. Not to mention testing across different devices in real time.

Here’s the breakdown:

Examples / Templates

When you start a brand new Project, you’ll see an (ever evolving) set of template projects in the sidebar:

You don’t have to use those, they are just there to give you some ideas or demonstrate how different types of Projects might work. If you upload a file or manually create one, those template options will disappear and you can work from scratch.

You can also Explore Projects to find other folks interesting work:

Things Will Evolve

This should go without saying, but of course, this is just our first release of Projects, and we have lots of ideas for improving it as we go.

If you have questions or comments, as always, hit us up in support.