Minimalist Code Player/Editor/Previewer – TinyEditor

Category: Javascript , Recommended | August 8, 2018
0 Comment
Demo Download
Author:umpox
Views Total:134 views
Official Page:Go to website
Last Update:August 8, 2018
License:MIT

Preview:

Minimalist Code Player/Editor/Previewer – TinyEditor

Description:

The TinyEditor allows you to generate a minimalist HTML/JavaScript/CSS code player/editor/previewer in the browser.

How to use it:

Just copy and paste the following snippet into the address bar of your browser, and then press enter. Done.

data:text/html,<body oninput="document.querySelector('iframe').srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{float:right;width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=JS id=j></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=HTML id=h></textarea><iframe>

This will generate a minimal Code Player/Editor/Previewer:

<body oninput="document.querySelector('iframe').
      srcdoc=h.value+'<style>'+c.value+
      '</style><script>'+j.value+'<\/script>'">
<style>
  textarea,iframe{float:right;width:100%;height:50%}
  body{margin:0}
  textarea{width:33.33%;font-size:18}
</style>
<textarea placeholder=JS id=j></textarea>
<textarea placeholder=CSS id=c></textarea>
<textarea placeholder=HTML id=h></textarea>
<iframe>

See Also:

You Might Be Interested In:

Leave a Reply