Build a Simple CodePen Clone using React

Image for post
Image for post
CodePen Clone

Welcome to a new simple React JS project, where we are going to build a CodePen clone using React.

So, fire up your terminal and create a new react app codepen-clone-react with the below command.

Image for post
Image for post
CodePen

We will remove all the unnecessary boiler-plate code and our index.js will look like below.

Image for post
Image for post
index.js

And the App.js contains only Hello World text.

Image for post
Image for post
App.js

Next, we need to install two dependencies which will help us in getting the code functionality required for CodePen.

Image for post
Image for post
npm install

We will next start to get our HTML in place. So, open the App.js and put the below code. Here, we will have space for the three Editor of the CodePen inside a div. Also, the second div contains the iframe which will show us the output.

Image for post
Image for post
App.js

Next, we will create a components folder inside the src folder and a file Editor.js inside it. Here, we are importing most of things from codemirror. We will basically displayName first and after that the Controlled component from react-codemirror2, which will contain most of the functionality.

Image for post
Image for post
Editor.js

Next, move back to App.js and we will pass the props to Editor. We are also using the useState to set the value and onChange.

Image for post
Image for post
App.js

One, more thing which we need to change is to make the theme as material in Editor.js for the codepen like dark background.

Image for post
Image for post
Editor.js

Now, in localhost we can see all the three Editors.

Image for post
Image for post
Editors

Next, we will do some basic styling to have everything look great on the web-app. Add the below styles in App.css, where we are taking help of flexbox to style everything.

Image for post
Image for post
App.css

Next, let’s make it expand till the end by these two styles.

App.css

Now, we will add functionality to show the output on screen, like CodePen. We just need to add a srcDoc in App.js, which will contain the html, css , js and add it in iframe.

After that we can move to localhost and see our CodePen in action.

Image for post
Image for post
App.js

Next, we will have the open and close button(O-C) to function properly and also to show a nice icon.

We will first use the useState to have a state variable of open, which is initially set to true. After that the we have a className of collapsed if there is no open class. We also have an onClick handler to have setOpen toggle between treu and false for opne.

Image for post
Image for post
Editor.js

Now, in App.css we will have the style for collapsed class and we will also update a CodeMirror class. Now, when we click on the button it will make it as small as possibel.

Image for post
Image for post
App.css

Lastly, let’s install some fontawesome libraries to show an icon, instead of O-C in button.

Image for post
Image for post
Terminal

Now, we will use these icons in our button and will also add a className btn-styles to style it more.

Image for post
Image for post
Editor.js

Back to App.css, we will put the styles including the overflow: hidden !important and this will complete our project.

Image for post
Image for post
App.css

And our project is working perfectly in localhost and exactly like CodePen.

Image for post
Image for post
CodePen

This completes our CodePen clone. You can find the code for the same in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store