TIL how to make my own codepen like

By Marc

To make your own codepen like, you just need to follow these instructions: 

  1. Open a website page like example.com
  2. Open the developper tools (right click and inspect page)
  3. On the inspect tab, richt click on the <body> tag and select "Modify as HTML" or similar
  4. Replace the code with 
<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i></iframe></body>

And.. tada.. you should see womething like this:

You can add your own html/CSS/JS code to test your snippets

This code can be tried on any website. But it will not work if a Content Security Policy is activated. This snippet is very basic but does the job :)

 

Enjoy!