JSBX
Description
JSBX is an HTML/CSS/JavaScript sandbox tool that I created for quickly prototyping and testing code in the browser. I use it nearly every day to test and debug bits of code prior to incorporating functionality into my production work.
Goals
Write and execute HTML, CSS and JavaScript code directly in the browser window.
Sandbox code should be exectued in it's own, isolated environment. We don't want to execute it in the same context as the tool itself.
Should be able to load 3rd party libraries such as lodash, luxon, etc.
User should be able to view JavaScript console log/warning/error output right in the tool, without needing to open the browser's developer tools console.
Ability to share project, so other people can view/run it.
Due to potential security issues, I don't want to deal with signup/login or storing code in a database.
Challenges
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?
Resolutions
I generated an iframe page, and injected some helper functions that route things like console output back to the tool (parent) page.
Because I didn't want to bother with user accounts or databases, I opted to include all code written as base64 encoded url params. This way you can just 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.