407 with whitespace as mentioned by others. As for how it works:
- There are textareas for each language
- Through event bubbling, one can listen to events on all of those with just 1 handler
- Elements with an `id` attribute have a corresponding property in the `window` (global scope), so you don't need to query for them.
With those facts, the code just listens to every change on any field, and assembles a (technically invalid, but in practice functional) HTML snippet, which is just:
(contents of the HTML box)
<style>(contents of the CSS box)</style>
<script>(contents of JS box)</script>
And pastes it into the iframe's content.
Not particularly efficient, but pretty good for <400b
The code is easy to read, I encourage you to do so. Basically it is setting the content of an iframe via `.srcdoc` to the content of the textarea you write in.
The provided index.html is optimised for readability, so it has a lot of extra whitespace. If you minify it, which results in the same content, it reduces to 337 characters[0]