How Code Sandboxes Update Content

Published Sep 29, 2021

In a previous post we created a simple code sandbox from scratch using plain TypeScript and it works great but then I noticed something interesting.

Whenever you update code on sites such as Codepen the iframe flashes because it tears down and rebuilds the DOM (Document Object Model). When I was using the Svelte REPL, or CodeSandbox I noticed it doesn’t do that — in fact it updates instantly without the iframe flashing.

At first I wondered how could this be — does it use some clever DOM updates behind the scenes? The answer is simpler than you might think.

The Flashing Iframe

First let me show you the offending code.

index.html

<textarea spellcheck="false"></textarea>
<iframe></iframe>

app.js

const editorElement = document.querySelector('textarea')
const iframeElement = document.querySelector('iframe')

editorElement.addEventListener('input', (event) => {
  // get current editor value
  const html = event.target.value

  // update iframe
  iframeElement.srcdoc = `
    <html>
      <body>
        ${html}
      </body>
    </html>
  `
})

The code just takes a <textarea> input and updates the srcdoc attribute of the <iframe> creating a minimal code sandbox.

In my example I have some basic styles that I haven’t included here to keep things simple.

The Solution

The solution to the flashing iframe is to not update the srcdoc each time a change happens but send a message from the parent to perform DOM manipulations inside the <iframe> which causes no refresh.

We can do this using the window.postMessage method from the parent window and listen for messages inside the <iframe> using the message event listener.

app.js

const editorElement = document.querySelector('textarea')
const iframeElement = document.querySelector('iframe')

iframeElement.srcdoc = `
  <html>
    <head>
    <script type="module">
      window.addEventListener('message', (event) => {
        const { type, value } = event.data;

        if (type === 'html') {
          document.body.innerHTML = value;
        }
      })
    </script>
    </head>
    <body>
    </body>
  </html>
`

editorElement.addEventListener('input', (event) => {
  // get current editor value
  const value = event.target.value

  // imagine you had different file types
  const html = { type: 'html', value }

  iframeElement.contentWindow.postMessage(html, '*')
})

You can determine what to do based on the type. For example you can inject CSS, or insert a <script> tag to execute JavaScript code.

The second parameter of postMessage is the target origin. In this case we’re saying * which means anything.

Conclusion

This might seem insignificant but it provides a magical user experience. Stay curious and question how things work.

Thanks for reading! 🏄‍♀️