Write and execute HTML, CSS and JavaScript code directly in the browser window.

Code written should be executed in it's own, isolated environment. We don't want to execute it in the same context as the sandbox tool itself.

Should be able to load 3rd party libraries such as babel, react, lodash, luxon, etc. via script tags.

User should be able to view JavaScript console output right in the tool, without needing to open the browser's developer tools console.

Ability to share project, so other people can view and run it.

Due to additional overhead requirements, the tool shouldn't require any sign-up or login.

Due to potential security concerns, all code written should live entirely client side, with no code ever being sent to any server or stored in any database.

How do I create an independent (child) webpage environment that is linked to the tool's (parent's) environment?

How can I make project shareable without requiring user accounts and a databse?

I generated an iframe to render the written code, and then injected some helper functions into the iframe page that forward things like console output back to the sandbox tool (parent) page so they can be viewed in the tool's console output panel.

Because I didn't want to bother with user accounts or databases, I opted to include all code written as compressed url params (leveraging LZ-based compression). This way you can simply copy and paste the url to share. Of course this can lead to some very long url's, but seeing as this tool was designed primarily for testing/prototyping small amounts of code, I didn't see url length as a significant issue.