From Development

How to use CodePen to speed up your front-end development

Have you ever came across the challenge that is implementing a new front-end without the influence of the old code in the new one? Yes, the struggle is real. But it is not the only one. Having to create a whole new project just to learn a specific framework, or to test a library/framework/component on isolation can be dull processes.

When trying to find a solution to overcome these scenarios, I tried a tool that makes our software developer's lives a lot easier: CodePen.

On this article, I'm going to explain what is CodePen, what you can do on this platform, how to do it and also why it can be so useful to speed up your front-end development.

What is CodePen

CodePen is a platform where developers and designers can create and share snippets (called pens) of HTML, CSS, Javascript or any other framework, library or preprocessor that generates them. Since it has a web-based code editor, you can change your code and see the result immediately, which allows a quicker debugging. It's perfect to test new designs or build specific components.

CodePen logo

What is CodePen used for

Gathering or sharing ideas

Thanks to the great community that CodePen has built, there are thousands of users creating and sharing their ideas of front-end components, animations and even almost finished layouts of webpages. If you have some ideas of your own that might be useful to other front-end professionals, this is the perfect place to share them. You just need to make sure your code is free from copyrights.

Style-guide your project

In case you're not interested in using other people's code, you can always use CodePen's online code editor to create the style for your project components. This way you can ensure each one of them is not influenced by code intended to style other components. You can think of it as a blank canvas. My recommendation is to create a pen for each component as you'll be working with less code each time. This way, you're preventing mistakes (like changing code for one component that destroys another) and only realizing it in the end.

Learn a new framework or library

The code editor from CodePen is a great tool to learn how to code a new framework or library. You don’t need to set up a new environment to test and run it every time you want to see the result of your changes. This is possible because the editor view shows the 3 sections of code and the preview at the same time, updating the last one every time something changes on the code.

How CodePen works

Now that you know what CodePen is most used for, let’s explore how it works. The platform is relatively easy to use, but has a lot of features. Some can even go unnoticed, even if you have already used it several times.

Search for pens

Right on the main page, you get a glimpse of what you can search: specific pens, people, projects or collections. You can also check CodePen suggestions (it is a great option to just see other people's code and learn some tricks) or you can hit the search bar to specify what you're looking for. If you are quick to write and press enter, you probably won’t notice that you can explore topics! They are organized by 3 different categories: Frameworks, Libraries and UI patterns. Each topic has its own page where you can explore pens, templates and resources. The list of topics is closed, but you can fill a form and ask for a specific one.

CodePen search bar options

When you finally look at examples, the first thing you encounter is the screenshot of the pen. Here's where you can quickly preview the result of the code and consider if it is something you are interested in. Then you can either click directly on the pen and open the Editor View (where you can play with the code) or click on the expansion arrows, on the right upper corner, to open the Details View. This view will let you comment on the pen, like and follow the author, see and interact with it, like this pen where you can play the xylophone. You can also pin it, to see it or use it later. Those pens will show on the navigation bar inside the “your” section, on the pinned items group.

Details view of a pen

Code Editor

The Code Editor is my favorite part of CodePen. With this tool you can see the 3 different types of code at once, HTML, CSS and Javascript simultaneously with the preview, that automatically updates as you change the code. There's no need to change between files and browser tabs, which makes the coding process quicker. Besides, if you don’t need one of these sections, you can hide it by adjusting its size. Changing the layout of this page is also an option. The standard is having the 3 code sections on top and the preview at the bottom, but if you want to do something that will need more height to be analysed, like a mobile version of a web app, you can change the layout under the change view menu and place the code sections vertically.

Like I've mentioned previously, CodePen lets you work with more than just pure HTML, CSS and Javascript. To include any other framework, library or preprocessor, you need to go to the settings. There you can find a tab corresponding to each one of the code sections, with options to change the preprocessor and include external sources (stylesheets or scripts). If, for example, you are more familiar with Haml than pure HTML, simply select Haml on the first dropdown menu. If you want to use Bootstrap on your pen go to the external stylesheets of the CSS section, type "Bootstrap", select the option you want to use and include as many sources as you need! It truly is very simple to set up a pen.

Settings on the CodePen code editor

On the settings, you can also:

  • Edit pen details (quite useful when sharing your creations with the community)
  • Make a template out of your pen
  • Change how many spaces or tabs your code's indentation have
  • How the pen will be saved
  • Change your pen to private (if pro user)
  • Add a personalized screenshot (if pro user)

Besides all of this, you still have access to other features on the Code Editor, including the list of assets for pro members, a console to help on debugging and all the options to export the project. But it does not stop here. One of the most interesting and unnoticed buttons on the Code Editor is "keys". Basically, it's where you have the full list of shortcuts available on CodePen, including the auto-complete feature, that just like me you probabily thought it did not exist.

Shortcuts on CodePen editor

How to add images on CodePen

If you are a CodePen Pro member, adding an image can be really simple:

  1. Access the "Assets" on the footer
  2. Add your image if you haven’t previously
  3. Copy the URL to use on your code.

If, just like me, you are using the free version, you’ll have to host your photo somewhere online in order to have a link ready to use. Besides Google photos you have Imgur , ImgBB and a lot of other websites that offer free hosting to your photos. Upload it and copy the link. Now you can use it as an img src, background-image, etc.

How to download your code

The easiest way to download your pen is to simply copy & paste the code into your project. That’s what I usually do. Nevertheless, you can download the pen as a zip file or save it as a Github gist. The second button, counting from the right on the footer, is "Export". Click on it and select your favorite option.

CodePen for React

To the question “Can I use React on CodePen?”, the answer is Yes. If it is a JavaScript library then the answer, in almost 100% of the cases, will be yes. To use React on CodePen, you need to access the settings of your pen and select the JS tab. If you open it and look at the options of the first dropdown menu you won’t see react, only the possible preprocessors. To add React you need to select the combo box on “Add External Scripts/Pens” and write "React". It will show all the available options so you can choose as many as needed and you are ready to code!

How to import React on CodePen

Flutter and Vue on CodePen

On CodePen, it's also possible to use Flutter and Vue, but you won’t be able to select them just like you did with React. Remember the topics when I explained how to search on CodePen? It’s only through them that you can access Vue and Flutter personalized editors. Go to the "Explore Topics" page, select the one you want and, on the right top corner, you'll find the "Open editor" button. On these editors, you’ll only have 2 sections: one for code and the other for preview.

CodePen Vue topic page

How to share CodepPen's code

You can share your pen in two ways: either by using the social media share button or the embedded functionality. To share it on social media, you can do it directly from the "Details View" or from the last button on the Editor View's footer. To share using the embedded code, you have to select "Embedded" on the Editor View's footer (3rd option from right) and copy the generated code. This method is great if you want to show your pen on a website by incorporating something like the Details View.

Warning: if you want to share another person's pen, make sure to copy it first. Use the "Fork" feature (4th option of Code Editor's footer) and it will copy the pen exactly as it is. You never know if the author will delete it or change something on the pen.

How to convert your code to regular HTML, CSS or Javascript

If you choose to use a different preprocessor, like SCSS instead of CSS, but your project only supports regular CSS, don’t worry. You have the option of transforming it with only one click. On the arrow, at the right upper corner of your selected code section, you have the option to “View Compiled ...”. All you have to do is click on it and it’s done. Don’t be afraid to do it, you can change it back. When you download the code, you will also see a folder where it is compiled.

Why use CodePen to accelerate your front-end development

If you haven't used it before, CodePen is indeed a great platform as it allows you to learn and code effectively. If you're starting a new front-end development project, here are the main reasons why you should use CodePen.

It’s free

What else do I need to say? You can do all that I've mentioned above without having to pay anything. If you want to, you can Go Pro and pay a monthly subscription to have access to additional features (like private pens, personalized screenshots, assets and more types of views). Personally, I have a free account and I didn't feel the need to have these extra features so far.

You don’t need an account

If you don’t want to create an account you don’t have to. You can still search and use the Code Editor. However, you won’t be able to save your pens to revisit them later. So, if you just want to test a couple of things, you can do that without an account.

Four screen sections with real time preview

Definitely one of the main advantages is to be able to see everything in a single screen. Not having to look for browser tabs or files tabs on an IDE makes my coding faster and easier. In addition, it gives a real time preview, which cuts the time of reloading pages every time we need to see if the code changes.

Using more than simple CSS, HTML, Javascript

Preprocessors, libraries and frameworks were created to make our life easier. CodePen manages to deliver a Code Editor tool where we can use all of them. We can do that and set up a pen with whatever we want to use, in just a few clicks. How great is this?

Examples of everything

If you need to find examples of something previously done, you will probably find them here! Animations, elements, full pages, you name it, they have it!

As a software developer at Imaginary Cloud, I feel like this is one of those tools that can truly accelerate your development.

CodePen was a tremendous help for my dissertation project, where I had to create a whole new front-end for an existing project. I often use it every time I want to learn something new like React and Animations, or to test a library/framework/component on isolation. When using CodePen, I'm not worried about the existing code. It gives us the freedom to create UI components as we want, so we can apply them to the project we're building.

Found this article useful? You might like these ones too!

At Imaginary Cloud, we simplify complex systems, delivering interfaces that users love. If you’ve enjoyed this article, you will certainly enjoy our newsletter, which may be subscribed below. Take this chance to also check our latest work and, if there is any project that you think we can help with, feel free to reach us. We look forward to hearing from you!