How to make a website like CodePen

#webdev #tutorial #beginners #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.

How to make a website like CodePen
How to create Live Coding Playground
How to create a live code editor for a website
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 • Feb 10 '21

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()

    }

}

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,