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]

[0] https://femto.pw/irb7.html