DEV Community

Cover image for How to make a website like CodePen

Posted on • Updated on

How to make a website like CodePen

Hello, guys in this tutorial we will learn how to make a website like CodePen, How to create a live coding playground

Today we will try to solve the below-mentioned query.

  1. How to make a website like CodePen
  2. How to create Live Coding Playground
  3. How to create a live code editor for a website
  4. How to make a web-based compiler like code pen

How to make a website like CodePen

Click on the above link to want to learn more

Top comments (3)

drgaud profile image

Great work dude,

I did have a few problems when I was going through the tutorial. After a few tweaks; turns out ContentWindow is different across the vendors (shocking i know). So this adjustment made it work fine,

function compile(){
    let htmlContent = document.getElementById('html')
    let cssContent = document.getElementById('css')
    let jsContent = document.getElementById('js')
    let output = document.getElementById('output')
    output = output.contentWindow || output.contentDocument.document || output.contentDocument

    document.body.onkeyup= function(){
        let doc = output.document;;


Enter fullscreen mode Exit fullscreen mode

Thanks again for a really good demo project. I have always wondered how they made those kinda interactive playground sites. I thought it would be complicated, but it turns out, its really straightforward. Genius,

stackfindover profile image

great job :)

peter279k profile image

It looks good for me! Thanks for your sharing :).