DEV Community

loading...
Cover image for How to make a website like CodePen

How to make a website like CodePen

stackfindover profile image Stackfindover ・1 min read

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

Discussion (3)

pic
Editor guide
Collapse
drgaud profile image
DrGaud

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;

        doc.open();
        doc.write(
            `
             <style>${cssContent.value}</style>
             <body>${htmlContent.value}</body>
             <script>${jsContent.value}</script>   
            `
        )
        doc.close()

    }

}
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,

Collapse
stackfindover profile image
Stackfindover Author

great job :)

Collapse
peter279k profile image
peter279k

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